Hello Guys ,
In this tutorial we are create hover animation on button using html and css. It displays the emoji when the cursor moves over the button. Here we will use the fontawesome CDN Link for emoji.
https://kit.fontawesome.com/704ff50790.js
Please place above link in the script tag.
Hover animation on button looking like below picture:
Let's get started.
HTML CODE :
- Create html file.
- Create Structure for all button that will be a switch to icon.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<div class="button-effect">
<h2>Animated Buttons</h2>
<a class="button effect-4" href="#"
title="Delivery">Delivery </a>
<a class="button effect-3" href="#"
title="Download">Download </a>
<a class="button effect-2" href="#"
title="Upload">Upload </a>
<a class="button effect-1" href="#"
title="Delete">Delete </a>
</div>
</div>
<script src=
"https://kit.fontawesome.com/704ff50790.js"></script>
</body>
</html>
CSS CODE :
- Here we can set background color , set margin and alignment text for body using below code.
/* Here we can set background color */
body {
background-color: white;
}
/* set margin and alignment for text */
body .container {
width: 850px;
margin: 70px auto 0px;
text-align: center;
}
- Here we can set font-family , font-size , color and style for h2 tag using below code.
- h2 tag is used for heading or text.
body .container .button-effect {
padding: 30px 0px;
}
body .container .button-effect h2 {
font-family: "Droid Serif", serif;
font-size: 40px;
color: black;
text-decoration-style: bold;
margin-bottom: 70px;
}
- Here we can set background color for specific button using below code.
body .container .button-effect a {
margin-right: 17px;
}
/* here you can set background color for specific button */
body .container .button-effect a:nth-child(2) {
background-color: white;
}
/* here you can set background color for specific button */
body .container .button-effect a:nth-child(3) {
background-color: white;
}
/* here you can set background color for specific button */
body .container .button-effect a:nth-child(4) {
background-color: white;
}
/* here you can set background color for specific button */
body .container .button-effect a:nth-child(5) {
background-color: white;
}
- Here we can set text-align , text-decoration , position , font-family , font-size , padding for button using below code.
.button {
text-align: center;
display: inline-block;
position: relative;
text-decoration: none;
color: black;
text-transform: capitalize;
/* background-color: - add your own background-color */
font-family: "Roboto", sans-serif;
/* put your font-family */
font-size: 18px;
padding: 20px 0px;
width: 150px;
border-radius: 6px;
overflow: hidden;
}
- Here we can set effect for every button using below code.
/*Effect for Delivery Button
Here you can set time for transition
*/
.button.effect-4 {
transition: all 0.2s linear 0s;
}
.button.effect-4:before {
content: "\f0d1";
font-family: FontAwesome;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
transform: scale(0, 1);
transition: all 0.2s linear 0s;
}
.button.effect-4:hover {
text-indent: -9999px;
}
.button.effect-4:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
/*Effect for Download Button
Here you can set time for transition
*/
.button.effect-3 {
transition: all 0.2s linear 0s;
}
.button.effect-3:before {
content: "\f019";
font-family: FontAwesome;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
transform: scale(0, 1);
transition: all 0.2s linear 0s;
}
.button.effect-3:hover {
text-indent: -9999px;
}
.button.effect-3:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
/*Effect for Upload Button
Here you can set time for transition
*/
.button.effect-2 {
transition: all 0.2s linear 0s;
}
.button.effect-2:before {
content: "\f093";
font-family: FontAwesome;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
transform: scale(0, 1);
transition: all 0.2s linear 0s;
}
.button.effect-2:hover {
text-indent: -9999px;
}
.button.effect-2:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
/*Effect for Delete Button
Here you can set time for transition
*/
.button.effect-1 {
transition: all 0.2s linear 0s;
}
.button.effect-1:before {
content: "\f2ed";
font-family: FontAwesome;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
transform: scale(0, 1);
transition: all 0.2s linear 0s;
}
.button.effect-1:hover {
text-indent: -9999px;
}
.button.effect-1:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
Complete CSS CODE :
- we can create css file and link to the html file but here we write the code using style tags in the head tag.
<style>
/* Here we can set background color */
body {
background-color: white;
}
/* set margin and alignment for text */
body .container {
width: 850px;
margin: 70px auto 0px;
text-align: center;
}
body .container .button-effect {
padding: 30px 0px;
}
body .container .button-effect h2 {
font-family: "Droid Serif", serif;
font-size: 40px;
color: black;
text-decoration-style: bold;
margin-bottom: 70px;
}
body .container .button-effect a {
margin-right: 17px;
}
/* here you can set background color for specific button */
body .container .button-effect a:nth-child(2) {
background-color: white;
}
/* here you can set background color for specific button */
body .container .button-effect a:nth-child(3) {
background-color: white;
}
/* here you can set background color for specific button */
body .container .button-effect a:nth-child(4) {
background-color: white;
}
/* here you can set background color for specific button */
body .container .button-effect a:nth-child(5) {
background-color: white;
}
.button {
text-align: center;
display: inline-block;
position: relative;
text-decoration: none;
color: black;
text-transform: capitalize;
/* background-color: - add your own background-color */
font-family: "Roboto", sans-serif;
/* put your font-family */
font-size: 18px;
padding: 20px 0px;
width: 150px;
border-radius: 6px;
overflow: hidden;
}
/*Effect for Delivery Button
Here you can set time for transition
*/
.button.effect-4 {
transition: all 0.2s linear 0s;
}
.button.effect-4:before {
content: "\f0d1";
font-family: FontAwesome;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
transform: scale(0, 1);
transition: all 0.2s linear 0s;
}
.button.effect-4:hover {
text-indent: -9999px;
}
.button.effect-4:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
/*Effect for Download Button
Here you can set time for transition
*/
.button.effect-3 {
transition: all 0.2s linear 0s;
}
.button.effect-3:before {
content: "\f019";
font-family: FontAwesome;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
transform: scale(0, 1);
transition: all 0.2s linear 0s;
}
.button.effect-3:hover {
text-indent: -9999px;
}
.button.effect-3:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
/*Effect for Upload Button
Here you can set time for transition
*/
.button.effect-2 {
transition: all 0.2s linear 0s;
}
.button.effect-2:before {
content: "\f093";
font-family: FontAwesome;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
transform: scale(0, 1);
transition: all 0.2s linear 0s;
}
.button.effect-2:hover {
text-indent: -9999px;
}
.button.effect-2:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
/*Effect for Delete Button
Here you can set time for transition
*/
.button.effect-1 {
transition: all 0.2s linear 0s;
}
.button.effect-1:before {
content: "\f2ed";
font-family: FontAwesome;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
transform: scale(0, 1);
transition: all 0.2s linear 0s;
}
.button.effect-1:hover {
text-indent: -9999px;
}
.button.effect-1:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
</style>
Complete CODE :
<!DOCTYPE html>
<html>
<head>
<style>
/* Here we can set background color */
body {
background-color: white;
}
/* set margin and alignment for text */
body .container {
width: 850px;
margin: 70px auto 0px;
text-align: center;
}
body .container .button-effect {
padding: 30px 0px;
}
body .container .button-effect h2 {
font-family: "Droid Serif", serif;
font-size: 40px;
color: black;
text-decoration-style: bold;
margin-bottom: 70px;
}
body .container .button-effect a {
margin-right: 17px;
}
/* here you can set background color for specific button */
body .container .button-effect a:nth-child(2) {
background-color: white;
}
/* here you can set background color for specific button */
body .container .button-effect a:nth-child(3) {
background-color: white;
}
/* here you can set background color for specific button */
body .container .button-effect a:nth-child(4) {
background-color: white;
}
/* here you can set background color for specific button */
body .container .button-effect a:nth-child(5) {
background-color: white;
}
.button {
text-align: center;
display: inline-block;
position: relative;
text-decoration: none;
color: black;
text-transform: capitalize;
/* background-color: - add your own background-color */
font-family: "Roboto", sans-serif;
/* put your font-family */
font-size: 18px;
padding: 20px 0px;
width: 150px;
border-radius: 6px;
overflow: hidden;
}
/*Effect for Delivery Button
Here you can set time for transition
*/
.button.effect-4 {
transition: all 0.2s linear 0s;
}
.button.effect-4:before {
content: "\f0d1";
font-family: FontAwesome;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
transform: scale(0, 1);
transition: all 0.2s linear 0s;
}
.button.effect-4:hover {
text-indent: -9999px;
}
.button.effect-4:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
/*Effect for Download Button
Here you can set time for transition
*/
.button.effect-3 {
transition: all 0.2s linear 0s;
}
.button.effect-3:before {
content: "\f019";
font-family: FontAwesome;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
transform: scale(0, 1);
transition: all 0.2s linear 0s;
}
.button.effect-3:hover {
text-indent: -9999px;
}
.button.effect-3:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
/*Effect for Upload Button
Here you can set time for transition
*/
.button.effect-2 {
transition: all 0.2s linear 0s;
}
.button.effect-2:before {
content: "\f093";
font-family: FontAwesome;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
transform: scale(0, 1);
transition: all 0.2s linear 0s;
}
.button.effect-2:hover {
text-indent: -9999px;
}
.button.effect-2:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
/*Effect for Delete Button
Here you can set time for transition
*/
.button.effect-1 {
transition: all 0.2s linear 0s;
}
.button.effect-1:before {
content: "\f2ed";
font-family: FontAwesome;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
transform: scale(0, 1);
transition: all 0.2s linear 0s;
}
.button.effect-1:hover {
text-indent: -9999px;
}
.button.effect-1:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="button-effect">
<h2>Animated Buttons</h2>
<a class="button effect-4" href="#"
title="Delivery">
Delivery
</a>
<a class="button effect-3" href="#"
title="Download">Download</a>
<a class="button effect-2" href="#"
title="Upload">Upload</a>
<a class="button effect-1" href="#"
title="Delete">Delete</a>
</div>
</div>
<script src=
"https://kit.fontawesome.com/704ff50790.js"></script>
</body>
</html>
Output :
If you liked this post do comment ,share and promote the post 🙏 . Please stay with us and support. 🙏
0 Comments