How to create an animated banner link using HTML and CSS

Overview

We can use HTML and CSS to create animated banners. HTML provides the layout of the banner, and CSS provides the banner style with animated effects. Sometimes, in banners made for advertising purposes, links are embedded, and in order to highlight the link, developers animate the link so that it is visible throughout the web content and increases the user's interest in clicking.

grammar

The syntax for creating links in HTML is -

<a href="#"></a>

algorithm

Step 1 − Create an HTML file in a text editor and add HTML templates to it.

Step 2 − Now create a parent div container that contains the banner with the class name "bannerCover".

<div class="bannerCover"></div>

Step 3 − Now create a sub-container div that contains links and other data, and add a class named "banner".

<div class="banner"></div>

Step 4 − Now add the link to the banner using HTML anchor tags.

<a href="https://www.tutorialspoint.com">tutorialspoint</a>

Step 5 − Now create a style.css file in the same folder and link the css file to the HTML document.

<link rel="stylesheet" href="style.css">

Step 6− Now style the banner for each element of the HTML.

.bannerCover {
   margin: 0;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.banner{
   box-shadow: 0 0 5px gray;
   padding:2rem;
   border-radius: 5px;
   text-align: center;
}

Step 7 − Position the anchor tag element and use the animation property to animate the link.

a {
   text-decoration: none;
   font-weight: 800;
   font-size: 2rem;
   color: green;
   padding: 0 2rem;
   animation: zoomup 1s linear alternate infinite;
}

Step 8 − Use keyframes to animate the banner link.

@keyframes zoomup{
   0%{
      font-size: 2rem;
   }
   25%{
      font-size: 2rem;
   }
   50%{
      font-size: 1.8rem;
      border-radius: 5px;
      padding: 0.2rem 0.5rem;
      color: white;
      background-color: red;
   }
   75%{
      font-size: 1.8rem;
      border-radius: 5px;
      padding: 0.2rem 0.5rem;
      color: white;
      background-color: red;
   }
   100%{
      font-size: 1.8rem;
      border-radius: 5px;
      padding: 0.2rem 0.5rem;
      color: white;
      background-color: red;
   }
}   

Step 9 − The animation link has been successfully created.

Example

In the above example, we built an animated link in the banner. To do this, we create two files: index.html and stye.css.

   
   <link rel="stylesheet" href="style.css">
    


   

      

         <a href="https://www.tutorialspoint.com">tutorialspoint</a>
         
(Click the above text to redirect to above page.)
      
   

The image below shows the output of the above example, the link color is white by default. In the image below, there is a text in the banner that says "tutorialspoint", so when the user loads this feature into the browser and clicks on the red background content, it will redirect the user to the linked web page. Links in the banner are animated and can shrink and enlarge over a period of time.

in conclusion

Since we used animated content in the above example, the name in the CSS animation property and the name of the animation in the keyframe must be the same to animate a specific element, otherwise the animation will not happen.

The above is the detailed content of How to create an animated banner link using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!