<!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
>