In this project, we are going to create animated buttons using HTML and CSS. In these buttons when we hover over them an emoji get displayed on them for better UX.
A glimpse of the Buttons:
CDN Link: For button icons, we will use the fontawesome CDN link. Place this link in the script tag.
https://kit.fontawesome.com/704ff50790.js
HTML: Create an HTML file, then create the structure of all the buttons that will be a hover effect(switch to icon). Create a div container inside that container place all the buttons.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="container">
<div class="button-effect">
<h2>Animated Buttons on Hover</h2>
<a class="effect effect-4" href="#"
title="Confirm Delivery">
Confirm Delivery
</a>
<a class="effect effect-3" href="#"
title="Download">Download</a>
<a class="effect effect-2" href="#"
title="Upload">Upload</a>
<a class="effect effect-1" href="#"
title="Delete">Delete</a>
<a class="effect effect-5" href="#"
title="Click Here to Message">
Message
</a>
</div>
</div>
<script src=
</script>
</body>
</html>
|
CSS: It is used to give different types of animations and effects to our HTML page so that it looks interactive to all users.
- Restore all the browser effects.
- Use classes and ids to give effects to HTML elements.
- Use @keyframes{} for giving the animation to HTML elements.
- Use of nth-child selector feature of CSS to call different links.
CSS
body { background-color: black;
}body .container { width: 850px;
margin: 70px auto 0px auto;
text-align: center;
}body .container .button-effect { padding: 30px 0px;
}body .container .button-effect h2 {
font-family: "Droid Serif", serif;
font-size: 20px;
color: #fff;
margin-bottom: 40px;
}body .container .button-effect a { margin-right: 17px;
}body .container .button-effect a:nth-child(2) {
background-color: #520a8d;
}body .container .button-effect a:nth-child(3) {
background-color: #4d0325;
}body .container .button-effect a:nth-child(4) {
background-color: #09858a;
}body .container .button-effect a:nth-child(5) {
background-color: #e60d2a;
}body .container .button-effect a:nth-child(6) {
background-color: #c45f0d;
}body .container .button-effect a:last-child { margin-right: 0px;
}.effect { text-align: center;
display: inline-block;
position: relative;
text-decoration: none;
color: #fff;
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-4 styles */.effect.effect-4 {
transition: all 0.2s linear 0s;
}.effect.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;
}.effect.effect-4:hover {
text-indent: -9999px;
}.effect.effect-4:hover:before {
transform: scale(1, 1);
text-indent: 0;
}.effect.effect-3 {
transition: all 0.2s linear 0s;
}.effect.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;
}.effect.effect-3:hover {
text-indent: -9999px;
}.effect.effect-3:hover:before {
transform: scale(1, 1);
text-indent: 0;
}.effect.effect-2 {
transition: all 0.2s linear 0s;
}.effect.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;
}.effect.effect-2:hover {
text-indent: -9999px;
}.effect.effect-2:hover:before {
transform: scale(1, 1);
text-indent: 0;
}.effect.effect-1 {
transition: all 0.2s linear 0s;
}.effect.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;
}.effect.effect-1:hover {
text-indent: -9999px;
}.effect.effect-1:hover:before {
transform: scale(1, 1);
text-indent: 0;
}.effect.effect-5 {
transition: all 0.2s linear 0s;
}.effect.effect-5:before {
content: "\f1d8";
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;
}.effect.effect-5:hover {
text-indent: -9999px;
}.effect.effect-5:hover:before {
transform: scale(1, 1);
text-indent: 0;
} |
Complete Solution: In this section, we will put the above sections together and create attractive Hover animated buttons.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<style>
body {
background-color: black;
}
body .container {
width: 850px;
margin: 70px auto 0px auto;
text-align: center;
}
body .container .button-effect {
padding: 30px 0px;
}
body .container .button-effect h2 {
font-family: "Droid Serif", serif;
font-size: 20px;
color: #fff;
margin-bottom: 40px;
}
body .container .button-effect a {
margin-right: 17px;
}
body .container .button-effect a:nth-child(2) {
background-color: #520a8d;
}
body .container .button-effect a:nth-child(3) {
background-color: #4d0325;
}
body .container .button-effect a:nth-child(4) {
background-color: #09858a;
}
body .container .button-effect a:nth-child(5) {
background-color: #e60d2a;
}
body .container .button-effect a:nth-child(6) {
background-color: #c45f0d;
}
body .container .button-effect a:last-child {
margin-right: 0px;
}
.effect {
text-align: center;
display: inline-block;
position: relative;
text-decoration: none;
color: #fff;
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-4 styles */
.effect.effect-4 {
transition: all 0.2s linear 0s;
}
.effect.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;
}
.effect.effect-4:hover {
text-indent: -9999px;
}
.effect.effect-4:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
.effect.effect-3 {
transition: all 0.2s linear 0s;
}
.effect.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;
}
.effect.effect-3:hover {
text-indent: -9999px;
}
.effect.effect-3:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
.effect.effect-2 {
transition: all 0.2s linear 0s;
}
.effect.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;
}
.effect.effect-2:hover {
text-indent: -9999px;
}
.effect.effect-2:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
.effect.effect-1 {
transition: all 0.2s linear 0s;
}
.effect.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;
}
.effect.effect-1:hover {
text-indent: -9999px;
}
.effect.effect-1:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
.effect.effect-5 {
transition: all 0.2s linear 0s;
}
.effect.effect-5:before {
content: "\f1d8";
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;
}
.effect.effect-5:hover {
text-indent: -9999px;
}
.effect.effect-5:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="button-effect">
<h2>Animated Buttons on Hover</h2>
<a class="effect effect-4" href="#"
title="Confirm Delivery">
Confirm Delivery
</a>
<a class="effect effect-3" href="#"
title="Download">Download</a>
<a class="effect effect-2" href="#"
title="Upload">Upload</a>
<a class="effect effect-1" href="#"
title="Delete">Delete</a>
<a class="effect effect-5" href="#"
title="Click Here to Message">
Message
</a>
</div>
</div>
<script src=
</script>
</body>
</html>
|
Output: