Looking for assistance in making an animation clickable as well

Hey there, I'm no expert in HTML and CSS, but I can make some changes to existing code. However, when it comes to writing code from scratch, I struggle. I need help turning this block of code into a clickable link. Can someone guide me on how to achieve that?

I'm not sure where exactly I should insert the information for the link.

I tried adding 'a:link' and 'href' attributes, but it didn't work as expected.

Any assistance would be highly appreciated!

<html>
<head>
    <style type="text/css">
.word{
 display: flex;
 font-size: 40px;
 font-family: "Bebas Neue";
 font-weight: bold;
 color: black;
 padding-top: 20px;
 padding-bottom: 10px;
 margin: 5%;
}

.l-anim{
  transform: translateY(50%);
  width: 100%
}

.c-anim{
transform: translateY(-50%);
  width: 100%
}

.ed-anim{
transform: translateY(50%) translateX(-10%) scale(.70);
width: 100%
}

.word:hover .l-anim, .word:hover .c-anim, .word:hover .ed-anim{
  transform: translateY(0%);
  transition: 1s all;
}

.word:not(:hover) .l-anim{
  transform: translateY(50%);
  transition: 1s all;
}

.word:not(:hover)  .c-anim{
  transform: translateY(-50%);
  transition: 1s all;
}

.word:not(:hover) .ed-anim{
  transform: translateY(-50%);
  transition: 1s all;
}



</style>
</head>


<div class="word">
  <div>SE</div>
  <div class="anim-wrapper">
    <div class="l-anim">L</div>
  </div>
  <div>E</div>
  <div class="anim-wrapper">
    <div class="c-anim">C</div>
  </div>
  <div>T</div>
  <div class="anim-wrapper">
    <div class="ed-anim">ED</div>
  </div>

</div>

</html>

Answer №1

Update

To make a link open in a new tab, you can include the target="_blank" attribute within the <a> tag. However, be aware that this may cause the link to be blocked by certain browsers.

Original

In this instance, the entire element is being used as a link.

To change the target address of the link, simply edit the value assigned to the href attribute within the <a> tag (which is located on the first line of HTML code).

I hope this explanation proves helpful.

For a practical example, refer to the live demo with a button provided below:

.word{
 display: flex;
 width: fit-content;
 font-size: 40px;
 font-family: "Bebas Neue";
 font-weight: bold;
 color: black;
 padding-top: 20px;
 padding-bottom: 10px;
 margin: 5%;
 cursor: pointer;
}

a.word:link, a.word:visited, a.word:hover {
 text-decoration: none !important;
}

.l-anim{
  transform: translateY(50%);
  width: 100%
}

c-anim{
transform: translateY(-50%);
  width: 100%
}

.ed-anim{
transform: translateY(50%) translateX(-10%) scale(.70);
width: 100%
}

.word:hover .l-anim, .word:hover .c-anim, .word:hover .ed-anim{
  transform: translateY(0%);
  transition: 1s all;
}

.word:not(:hover) .l-anim{
  transform: translateY(50%);
  transition: 1s all;
}

.word:not(:hover)  .c-anim{
  transform: translateY(-50%);
  transition: 1s all;

}

.word:not(:hover) .ed-anim{
  transform: translateY(-50%);
  transition: 1s all;
}
<!-- To open a new tab for link, add target="_blank" to <a> -->
<!-- Change the link url in here 👇 -->
<a class="word" href="https://en.wikipedia.org">


  <div>SE</div>
  <div class="anim-wrapper">
    <div class="l-anim">L</div>
  </div>
  <div>E</div>
  <div class="anim-wrapper">
    <div class="c-anim">C</div>
  </div>
  <div>T</div>
  <div class="anim-wrapper">
    <div class="ed-anim">ED</div>
  </div>
</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to Embedding a SQL Table into an HTML Table

I need to set up a table within my current webpage to showcase a list of movies along with their genres. Welcome to my Movies page. The index.php file contains all the necessary database credentials and establishes the connection. <?php session_start( ...

Tips for updating the background color of a single date cell in ngb-datepicker using Angular

Recently, I started using ngb-datepicker and I'm curious if it's possible to customize the background-color of a specific day, like the 8th of November. HTML <ngb-datepicker name="dp" [(ngModel)]="model" ngbDatepicker [dayTemplate]="customDa ...

using Javascript to calculate motion based on specified angle

http://pastebin.com/3vwiTUyT I have posted my code here and need assistance. Specifically, I am trying to make krog1 move within the canvas based on a specific angle that I set. Unfortunately, I am unsure how to accomplish this task. ...

If the height of the window changes, then update the CSS height accordingly

Here is the code that I am using: $(document).ready(function() { $('body').css('overflow', 'scroll'); var heightWithScrollBars = $(window).height(); $('body').css('overflow', 'auto') ...

show: alongside move: towards the left

Reviewing some vintage CSS code from 2008, I stumbled upon the following CSS snippet for a menu/navigation: #menu li { display: inline; } #menu a { display: block; float: left; height: 32px; margin: 0; padding: 18px 30px 0 30px; ...

Preventing Event Propagation in Angular HTML

I am encountering an issue with stopPropagation, and I need assistance with implementing it in HTML and TypeScript for Angular. The problem is that the dialog opens but also triggers a propagation. Below is my code snippet in HTML: <label for="tab-two ...

Guide to obtaining context vnode within vue 3 custom directives

Unable to retrieve context from directive <template lang="pug"> div(class="form") select(name="name" v-model="form.input" v-select="form.inputs") option(v-for="(option, ke ...

Setting up the html div to contain the three.js container

Within my article container, there are three aside tags. The third aside with id='menuPuzzleType' contains a Three.js script that creates and displays two cube meshes in a Canvas renderer. <article id="popup"> <aside id='close ...

Display a JQuery dropdown menu depending on the ID of the current section

In my one-page structure, I have multiple sections with a categorized nav-bar that includes drop-down lists for each category. My goal is to display the drop-down menu of the category corresponding to the current section. if($("#About").hasClass('act ...

Place JavaScript buttons within a form element without triggering form submission upon clicking the buttons

Struggling to find the right words, but I'll give it a shot. I have a PHP form with multiple fields, including a textarea where I store some PHP values. I wanted to enhance the appearance of the PHP values by adding a beautifier with CSS styling. Ever ...

Initiating a file download using HTML

When I try to initiate a download by specifying the filename, instead of downloading, it opens in a new tab. The code snippet below shows what I am currently using. Additionally, I am working on Chrome Browser. <!DOCTYPE html> <html> < ...

Do you know the name of the jQuery tool that Mashable employs for showcasing their top 5 images and videos?

Recently, I came across an image scroller on Mashable that caught my eye and I am interested in incorporating it into a new project: I saw it in action on the website, but I am curious about what it actually is. Does anyone know if it is available as a W ...

Kendo checkbox toggle issue with switching between true and false states is not functioning correctly

How can I make a button appear when one or more checkboxes are clicked? Currently, the toggle function only activates when I select one checkbox, and then deactivates upon selecting another. Any guidance on improving this functionality would be greatly app ...

Using jQuery, prevent the user from entering text into an input box when a checkbox

In my project, there is a checkbox that determines whether an input box is disabled. The issue arises when I try to disable the input based on the database value. For example, when the value is 0, it should display as disabled false; however, the input rem ...

Setting the z-index for Bootstrap dropdown menus on containers that are generated dynamically

When using the Bootstrap 3 dropdown-menu within a dynamically generated container, I am encountering an issue where the dropdown-menu appears behind the newly created elements. Please refer to the image for visual clarification. The container item has pos ...

Is the z-index functioning properly for the header call-to-action text on mobile devices, but not on desktop?

The desktop header cta is functioning properly, but when I switch to mobile nothing happens. I attempted to increase the z-index number within the html instead of in the style sheet. This is where my CTA is located in the html: CALL TO ACTION surrounded ...

Is there a way to shift the display of inline-block to the right?

I'm struggling with positioning a div that's nested within a display:inline-block. How can I align it to the right side of the container? <div style='width:100%'> left <div style='display:inline-block;position:relative;r ...

Harnessing the Power of Material UI to Revolutionize Amplify Theming

I am currently developing a React application with Material-UI and Amplify UI Components. I am looking to customize the Amplify theming. By following the guidance provided on Amplify UI Components Customization, I have been able to override CSS variables ...

Is it possible to access the ID element of HTML using a variable in jQuery?

I have fetched some data from a JSON ARRAY. These values include Value1,Value2, and Value3. Additionally, I have an HTML checkbox with an ID matching the values in the array. My goal is to automatically select the checkbox that corresponds to the value re ...

Leveraging AngularJS to enhance the dynamic HTML content within Datatables

My angular application includes a Datatable where I alter cell content to include HTML elements. In the given code snippet, I specifically modify the cell content of the 5th column to incorporate links. Additionally, I intend to implement a tooltip featur ...