How to Create Simple CSS Button Hover Effects with Code Examples

Author - Maketechstuff
March 09, 2023
0

In this post you'll learn how to create simple yet effective CSS button hover effects with this step-by-step tutorial. This guide includes code examples, screenshots, and engaging button hover effects.


This tutorial is perfect for web developers of all levels who want to learn how to add a little bit of flair to their buttons. By the end of this tutorial, you'll be able to create your own simple CSS button hover effects that will make your website stand out.


We going to fill buttons with colour from left to right, right to left, top to bottom, bottom to top when hover on it. 


Simple css button hover effects


You may have seen in many websites that when you hover on buttons or any element, it changes or shows some effects like it background colour, text colour, font-size, whole element etc changes or move. It depends upon which hover effects developer have added. In this blog post we going to make some or 5 hover effects on buttons using HTML & CSS.


Video Tutorial On Simple Button Hover Effects: 




CSS Button Hover Effects.

So, first of all I have created index.html file. And added button tag, and inside it I have added anchor tag.

HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <button class="button" type="button">
        <a href="#">Hover</a>
    </button>

</body>
</html>

CSS


body{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.button{
    background-color: transparent;
    padding: 0;
}
.button a{
    font-size: 35px;
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    color: #000;
    transition: 0.2s;
}
.button a:hover{
    color: #fff;
}

Output : 


Simple css button hover effects

So, here's a simple button is created. As you can see above image, I have added hover effects on button anchor tag of white colour, as initially a black colour is there and I have not removed border in button, it just to show the button length and width. Later I will remove it. 


1. Now let's add different hover effects to button.

So, to add hover effects I have added span tag inside button tag and after anchor tag.

HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <button class="button" type="button">
        <a href="#">Hover</a><span></span>
    </button>

</body>
</html>

css


body{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.button{
    background-color: transparent;
    border: none;
    z-index: 1;
    position: relative;
    padding: 0;
}
.button a{
    font-size: 35px;
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    color: #000;
    transition: 0.2s;
}
.button a:hover{
    color: #fff;
}
span{
    position: absolute;
    width: 0%;
    height: 100%;
    background-color: blue;
    top: 0;
    left: 0;
    z-index: -1;
    transition: 0.2s;
}
.button:hover span{
    width: 100%;
}

Output : 


Simple css button hover effects

The hover effect is ready. The above image fills blue colour from right to left when hovered.


2. Now let's make another css button hover effects.

Hover effects that fill colour from left to right.


HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <button class="button" type="button">
        <a href="#">Hover</a><span></span>
    </button>

</body>
</html>

CSS


body{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.button{
    background-color: transparent;
    border: none;
    z-index: 1;
    position: relative;
    padding: 0;
}
.button a{
    font-size: 35px;
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    color: #000;
    transition: 0.2s;
}
.button a:hover{
    color: #fff;
}
span{
    position: absolute;
    width: 0%;
    height: 100%;
    background-color: blue;
    top: 0;
right: 0;
    z-index: -1;
    transition: 0.2s;
}
.button:hover span{
    width: 100%;
}

Output : 


Simple css button hover effects

3. CSS button hover effects that fill colour from top to bottom.

HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <button class="button" type="button">
        <a href="#">Hover</a><span></span>
    </button>

</body>
</html>

CSS


body{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.button{
    background-color: transparent;
    border: none;
    z-index: 1;
    position: relative;
    padding: 0;
}
.button a{
    font-size: 35px;
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    color: #000;
    transition: 0.2s;
}
.button a:hover{
    color: #fff;
}
span{
    position: absolute;
 width: 100%;
    height: 0%;
    background-color: blue;
    top: 0;
    right: 0;
    z-index: -1;
    transition: 0.2s;
}
.button:hover span{
height: 100%;
}

Output : 


Simple css button hover effects

4. CSS button hover effects that fill colour from bottom to top.

Now to make bottom to top filling hover effect, just change top:0 to bottom:0 in span tag css property.


Output : 


Simple css button hover effects


5. CSS button hover effects bottom line from left to right.

HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <button class="button" type="button">
        <a href="#">Hover</a><span></span>
    </button>

</body>
</html>

CSS


body{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.button{
    background-color: transparent;
    border: none;
    z-index: 1;
    position: relative;
    padding: 0;
}
.button a{
    font-size: 35px;
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    color: #000;
    transition: 1s;
}
span{
    position: absolute;
    width: 0%;
    height: 10%;
    background-color: blue;
    bottom: 0;
    left: 0;
    z-index: -1;
    transition: 1s;
}
.button:hover span{
    width: 100%;
}

Output : 


Simple css button hover effects

As you can see in above image. The image is capture on middle of hover effect. So, as you can see when hovering, the line at bottom width goes from 0 to 100%.

Likewise, you can make Right to left. Just change left:0 to right:0 in span tag in css property.


You may like:

  1. How to create enable and disable button dynamically using JavaScript.
  2. How to enable button only when input field has value.
  3. How to add hover effects on button border using HTML & CSS.
  4. How to detect button is hold using JavaScript.
  5. How to change button text with animation using JavaScript.
  6. How to create a simple toggle button using HTML & CSS.
  7. Create a simple CSS card hover effect.


So that's how you can make css button hover effects using html and css. If you have any query or suggestion you can write in comment section.


Tags

You may like these posts

Show more

Post a Comment

0Comments

Share your thoughts.

Post a Comment (0)
Share to other apps
Copy Post Link
To Top