Creating simple buttons with hover animations using CSS can enhance the user experience on your website.
HTML:
Create an HTML file and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Buttons with Hover animations</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="row text-center">
<div class="col-sm-12">
<h3 class="">Line Buttons</h3>
</div>
<div class="col-sm-12">
<a href="#" class="btn-lines">
<small>Deep Purple</small>
<div class="line-top deep-purple"> </div>
<div class="line-right deep-purple"> </div>
<div class="line-bottom deep-purple"> </div>
<div class="line-left deep-purple"> </div>
</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-lines">
<small>Indigo</small>
<div class="line-top indigo"> </div>
<div class="line-right indigo"> </div>
<div class="line-bottom indigo"> </div>
<div class="line-left indigo"> </div>
</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-lines">
<small>Light Blue</small>
<div class="line-top light-blue"> </div>
<div class="line-right light-blue"> </div>
<div class="line-bottom light-blue"> </div>
<div class="line-left light-blue"> </div>
</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-lines">
<small>Blue</small>
<div class="line-top blue"> </div>
<div class="line-right blue"> </div>
<div class="line-bottom blue"> </div>
<div class="line-left blue"> </div>
</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-lines">
<small>Cyan</small>
<div class="line-top cyan"> </div>
<div class="line-right cyan"> </div>
<div class="line-bottom cyan"> </div>
<div class="line-left cyan"> </div>
</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-lines">
<small>Teal</small>
<div class="line-top teal"> </div>
<div class="line-right teal"> </div>
<div class="line-bottom teal"> </div>
<div class="line-left teal"> </div>
</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-lines">
<small>Green</small>
<div class="line-top green"> </div>
<div class="line-right green"> </div>
<div class="line-bottom green"> </div>
<div class="line-left green"> </div>
</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-lines">
<small>Light Green</small>
<div class="line-top light-green"> </div>
<div class="line-right light-green"> </div>
<div class="line-bottom light-green"> </div>
<div class="line-left light-green"> </div>
</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-lines">
<small>Lime</small>
<div class="line-top lime"> </div>
<div class="line-right lime"> </div>
<div class="line-bottom lime"> </div>
<div class="line-left lime"> </div>
</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-lines">
<small>Yellow</small>
<div class="line-top yellow"> </div>
<div class="line-right yellow"> </div>
<div class="line-bottom yellow"> </div>
<div class="line-left yellow"> </div>
</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-lines">
<small>Amber</small>
<div class="line-top amber"> </div>
<div class="line-right amber"> </div>
<div class="line-bottom amber"> </div>
<div class="line-left amber"> </div>
</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-lines">
<small>Orange</small>
<div class="line-top orange"> </div>
<div class="line-right orange"> </div>
<div class="line-bottom orange"> </div>
<div class="line-left orange"> </div>
</a>
</div>
</div>
<hr />
<div class="row text-center">
<div class="col-sm-12">
<h3 class="">Fill Up Buttons</h3>
</div>
<div class="col-sm-12">
<a href="#" class="btn-fillup dark deep-purple">Deep Purple</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-fillup dark indigo">Indigo</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-fillup dark light-blue">Light Blue</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-fillup dark blue">Blue</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-fillup dark cyan">Cyan</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-fillup dark teal">Teal</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-fillup dark green">Green</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-fillup dark light-green">Light Green</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-fillup dark lime">Lime</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-fillup dark yellow">Yellow</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-fillup dark amber">Amber</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-fillup dark orange">Orange</a>
<div class="horizontal-divider"></div>
</div>
</div>
<hr />
<div class="row text-center">
<div class="col-sm-12">
<h3 class="">Ghost Buttons</h3>
</div>
<div class="col-sm-12">
<a href="#" class="btn-ghost btn-strong-style deep-purple">Deep Purple</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-ghost btn-strong-style indigo">Indigo</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-ghost btn-strong-style light-blue">Light Blue</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-ghost btn-strong-style blue">Blue</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-ghost btn-strong-style cyan">Cyan</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-ghost btn-strong-style teal">Teal</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-ghost btn-strong-style green">Green</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-ghost btn-strong-style light-green">Light Green</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-ghost btn-strong-style lime">Lime</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-ghost btn-strong-style yellow">Yellow</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-ghost btn-strong-style amber">Amber</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-ghost btn-strong-style orange">Orange</a>
</div>
</div>
<hr />
<div class="row text-center">
<div class="col-sm-12">
<h3 class="">Default Buttons</h3>
</div>
<div class="col-sm-12 divide-sm">
<a href="#" class="btn deep-purple">Deep Purple</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn indigo">Indigo</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn light-blue">Light Blue</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn blue">Blue</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn cyan">Cyan</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn teal">Teal</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn green">Green</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn light-green">Light Green</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn lime">Lime</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn yellow">Yellow</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn amber">Amber</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn orange">Orange</a>
<div class="horizontal-divider"></div>
</div>
</div>
<hr />
<div class="row text-center">
<div class="col-sm-12">
<h3 class="">Underline Buttons</h3>
</div>
<div class="col-sm-12">
<a href="#" class="btn-underline deep-purple">Deep Purple</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-underline indigo">Indigo</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-underline light-blue">Light Blue</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-underline blue">Blue</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-underline cyan">Cyan</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-underline teal">Teal</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-underline green">Green</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-underline light-green">Light Green</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-underline lime">Lime</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-underline yellow">Yellow</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-underline amber">Amber</a>
<div class="horizontal-divider"></div>
<a href="#" class="btn-underline orange">Orange</a>
</div>
</div>
</div>
</body>
</html>CSS:
Create a styles.css file and add the following code:
body {
font-family: 'Open sans', sans-serif;
padding: 15px 0 0;
}
* {
outline: none !important;
text-decoration: none !important;
}
a, a:hover {
color: #111;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-ms-transition: 0.2s;
transition: 0.2s;
}
.horizontal-divider {
display: inline-block;
margin-left: 20px;
}
h3 {
font-size: 24px;
font-weight: 600;
padding-bottom: 10px;
}
.deep-purple {
background: #5e35b1;
color: #5e35b1;
border: 1px solid #5e35b1;
fill: #5e35b1;
}
.deep-purple:hover, .deep-purple:hover:after, .deep-purple.btn-fillup:after {
background: #49298a;
color: #49298a;
border: 1px solid transparent;
}
.indigo {
background: #3f51b5;
color: #3f51b5;
border: 1px solid #3f51b5;
fill: #3f51b5;
}
.indigo:hover, .indigo:hover:after, .indigo.btn-fillup:after {
background: #32408f;
color: #32408f;
border: 1px solid transparent;
}
.blue {
background: #2196f3;
color: #2196f3;
border: 1px solid #2196f3;
fill: #2196f3;
}
.blue:hover, .blue:hover:after, .blue.btn-fillup:after {
background: #0c7cd5;
color: #0c7cd5;
border: 1px solid transparent;
}
.light-blue {
background: #03a9f4;
color: #03a9f4;
border: 1px solid #03a9f4;
fill: #03a9f4;
}
.light-blue:hover, .light-blue:hover:after, .light-blue.btn-fillup:after {
background: #0286c2;
color: #0286c2;
border: 1px solid transparent;
}
.cyan {
background: #00bcd4;
color: #00bcd4;
border: 1px solid #00bcd4;
fill: #00bcd4;
}
.cyan:hover, .cyan:hover:after, .cyan.btn-fillup:after {
background: #008fa1;
color: #008fa1;
border: 1px solid transparent;
}
.teal {
background: #009688;
color: #009688;
border: 1px solid #009688;
fill: #009688;
}
.teal:hover, .teal:hover:after, .teal.btn-fillup:after {
background: #00635a;
color: #00635a;
border: 1px solid transparent;
}
.green {
background: #b0d139;
color: #b0d139;
border: 1px solid #b0d139;
fill: #b0d139;
}
.green:hover, .green:hover:after, .green.btn-fillup:after {
background: #91ae29;
color: #91ae29;
border: 1px solid transparent;
}
.light-green {
background: #8bc34a;
color: #8bc34a;
border: 1px solid #8bc34a;
fill: #8bc34a;
}
.light-green:hover, .light-green:hover:after, .light-green.btn-fillup:after {
background: #71a436;
color: #71a436;
border: 1px solid transparent;
}
.lime {
background: #cddc39;
color: #cddc39;
border: 1px solid #cddc39;
fill: #cddc39;
}
.lime:hover, .lime:hover:after, .lime.btn-fillup:after {
background: #b2c022;
color: #b2c022;
border: 1px solid transparent;
}
.yellow {
background: #ffeb3b;
color: #ffeb3b;
border: 1px solid #ffeb3b;
fill: #ffeb3b;
}
.yellow:hover, .yellow:hover:after, .yellow.btn-fillup:after {
background: #ffe608;
color: #ffe608;
border: 1px solid transparent;
}
.amber {
background: #ffb300;
color: #ffb300;
border: 1px solid #ffb300;
fill: #ffb300;
}
.amber:hover, .amber:hover:after, .amber.btn-fillup:after {
background: #cc8f00;
color: #cc8f00;
border: 1px solid transparent;
}
.orange {
background: #e64a19;
color: #e64a19;
border: 1px solid #e64a19;
fill: #e64a19;
}
.orange:hover, .orange:hover:after, .orange.btn-fillup:after {
background: #b83b14;
color: #b83b14;
border: 1px solid transparent;
}
.btn-lines {
position: relative;
display: inline-block;
width: 100px;
height: 37px;
margin: 15px 0;
border: 1px solid #eee;
text-align: center;
}
.btn-lines small {
line-height: 34px;
}
.btn-lines div[class^="line"] {
position: absolute;
border: 0px solid transparent;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.btn-lines .line-top {
top: -1px;
left: -1px;
width: 0;
height: 1px;
}
.btn-lines .line-right {
bottom: 0;
right: -1px;
width: 1px;
height: 0;
}
.btn-lines .line-bottom {
bottom: -1px;
right: -1px;
width: 0;
height: 1px;
}
.btn-lines .line-left {
top: 0;
left: -1px;
width: 1px;
height: 0;
}
.btn-lines:hover .line-top, .btn-lines:hover .line-bottom {
width: 100px;
}
.btn-lines:hover .line-right, .btn-lines:hover .line-left {
height: 36px;
}
.btn, .btn:hover, .btn:focus, .btn:active, .btn:active:focus {
color: #fff;
font-size: 13px;
font-weight: 300;
padding: 12px 20px;
margin: 15px 0;
border: 1px solid transparent;
border-radius: 0;
outline: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.btn-fillup {
color: #fff;
font-weight: 400;
font-size: 14px;
text-align: center;
position: relative;
display: inline-block;
padding: 12px 30px;
margin: 15px auto 0;
overflow: hidden;
zoom: 1;
border: 0;
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}
.btn-fillup.dark {
border: 0px solid rgba(0, 0, 0, .4);
}
.btn-fillup.dark:hover {
background: transparent;
color: #fff;
border: 0px solid transparent;
}
.btn-fillup:after {
position: absolute;
content: '';
left: 50%;
top: 60px;
width: 200px;
height: 200px;
margin: 0 0 0 -100px;
border: 0;
z-index: -1;
-webkit-transform: traslateY(0px);
-moz-transform: traslateY(0px);
-ms-transform: traslateY(0px);
-o-transform: traslateY(0px);
transform: traslateY(0px);
-webkit-transition: transform 0.3s ease-out;
-moz-transition: transform 0.3s ease-out;
-ms-transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
.btn-fillup:hover:after {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-ms-transform: translateY(-100px);
-o-transform: translateY(-100px);
transform: translateY(-100px);
}
.btn-ghost {
background: transparent;
font-weight: 300;
position: relative;
display: inline-block;
margin: 15px 0;
padding: 12px 20px;
line-height: 1;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.btn-ghost:hover {
color: #fff;
}
.btn-strong-style {
font-size: 12px;
text-transform: uppercase;
padding: 14px 25px;
font-weight: 600;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
}
.btn-underline {
background: transparent;
font-weight: 300;
font-size: 14px;
position: relative;
display: inline-block;
margin: 15px 0;
padding: 4px 0;
border: 0px solid transparent;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
}
.btn-underline:hover {
background: transparent;
border: 0px solid transparent;
}
.btn-underline:hover:after {
width: 100%;
left: 0;
border: 0px solid transparent !important;
}
.btn-underline:after {
background: transparent;
position: absolute;
content: "";
height: 1px;
width: 0;
bottom: 0;
left: 50%;
-webkit-transition: compact(all 0.3s ease);
-moz-transition: compact(all 0.3s ease);
-ms-transition: compact(all 0.3s ease);
transition: compact(all 0.3s ease);
}Happy coding!
