How to Create a Hover Link With 'Click Me' Text Using HTML/CSS

Hello Geeks! You must have learned to add links in HTML documents. HTML links help us a lot in connecting a webpage to another webpage. Through this article, I am going to give you some practical approach by which you can add cool effects to these normal links.

click me Hover Effect Using  HTML and CSS

We used to use the traditional method to highlight a link in a web page, in which we change the color by underlining the link. Like:- demo link

Here we are going to tell you a very cool way to make the link in the web page more attractive. When we hover over a link you will get a text show "Click me!" This will make it easier for the person visiting the webpage to recognize that it is a link. Hover Click Me! in HTML Link We will use CSS to create the effect.

Demo: hover this Link to see effect.

If you want to learn how to add this effect to someone, then through this article we will teach you. You try to learn by reading this article. If you face any problem then we have provided you the complete source code of this cool project for that.

How to Create Hover Link With Click Me! Text

1.Open your code editor and Create an HTML document.

2.Add a normal HTML link to it. Use the below code to create the link.

<a class="link" href="#">Hover Me & see effect</a>

3.The link you'll create is now a normal link, but when you hover over it, Use the CSS code given below for such an effect that the "Click Me!" text is shown.

<style>
    .container {
        text-align: center;
        padding-top: 2rem;
    }
    
    .link {
        position: relative;
    }
    
    .link::before {
        content: "Click";
        font-size: 0.9em;
        background: black;
        color: white;
        line-height: 1em;
        padding: 0.2em 0.15em 0;
        border-radius: 0.2em;
        position: absolute;
        top: -1em;
        left: 50%;
        opacity: 0;
        transform: translate(-65%, 20%) rotateZ(-1deg);
        transition: 0.4s opacity cubic-bezier(0.33, 1, 0.68, 1), 0.4s transform cubic-bezier(0.33, 1, 0.68, 1);
    }
    
    .link:after {
        content: "me!";
        position: absolute;
        font-size: 0.9em;
        background: black;
        color: white;
        line-height: 1em;
        padding: 0.2em 0.15em 0;
        border-radius: 0.2em;
        top: -1em;
        left: 50%;
        opacity: 0;
        transform: translate(45%, 20%) rotateZ(1deg);
        transition: 0.4s opacity cubic-bezier(0.33, 1, 0.68, 1), 0.4s transform cubic-bezier(0.33, 1, 0.68, 1);
    }
    
    .link:hover::before {
        opacity: 1;
        transform: translatex(-75%) rotateZ(-3deg);
    }
    
    .link:hover::after {
        opacity: 1;
        transform: translatex(45%) rotateZ(3deg);
    }
</style>

4.It's time to test your code. Run your HTML document in browser.

If you want to make some changes according to you, change the properties and values of the CSS code. Once you learn, practice yourself and try to make the same effect.

Full Source Code

Here we are giving you the complete source code of this project with HTML and CSS. By this you will get quick access to this project. If you encounter any errors or if the code is not working properly then you can use this code directly.

Download Code/download/button

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover With Click Me!</title>
</head>
<style>
    .container {
        text-align: center;
        padding-top: 2rem;
    }
    
    .link {
        position: relative;
    }
    
    .link::before {
        content: "Click";
        font-size: 0.9em;
        background: black;
        color: white;
        line-height: 1em;
        padding: 0.2em 0.15em 0;
        border-radius: 0.2em;
        position: absolute;
        top: -1em;
        left: 50%;
        opacity: 0;
        transform: translate(-65%, 20%) rotateZ(-1deg);
        transition: 0.4s opacity cubic-bezier(0.33, 1, 0.68, 1), 0.4s transform cubic-bezier(0.33, 1, 0.68, 1);
    }
    
    .link:after {
        content: "me!";
        position: absolute;
        font-size: 0.9em;
        background: black;
        color: white;
        line-height: 1em;
        padding: 0.2em 0.15em 0;
        border-radius: 0.2em;
        top: -1em;
        left: 50%;
        opacity: 0;
        transform: translate(45%, 20%) rotateZ(1deg);
        transition: 0.4s opacity cubic-bezier(0.33, 1, 0.68, 1), 0.4s transform cubic-bezier(0.33, 1, 0.68, 1);
    }
    
    .link:hover::before {
        opacity: 1;
        transform: translatex(-75%) rotateZ(-3deg);
    }
    
    .link:hover::after {
        opacity: 1;
        transform: translatex(45%) rotateZ(3deg);
    }
</style>

<body>

    <div class="container">
        <h1>Hover Link with Click Me! Text</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a class="link" href="#">link</a> Porro aut modi odio laborum, dolorum, fugit explicabo adipisci beatae eaque impedit a eum sapiente optio vero laudantium quo accusamus perspiciatis deserunt
            rerum cum quibusdam nemo voluptas repellendus. Maiores adipisci dicta ea ipsam, et tenetur voluptate.</p>
        <a class="link" href="#">Hover Me & see effect</a>
    </div>


</body>

</html>

Give us a feedback about our content...

Post a Comment

Give us a feedback about our content...

Post a Comment (0)

Previous Post Next Post