Buttons are an integral part of any interface. They can be created using either an element <button>or <a>. The difference in their use is based on HTML semantics.
A button is an interface element, when clicked, an action or event associated with it occurs. A link connects documents to each other, when clicked, opens the page (with the exception of anchors, which allow you to navigate to sub heading on the same page).
You can try different fonts and icons from the library.
Here are 7 different Animated buttons created in pure CSS
* {
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
Example 1 Button with shadow animation
<button class="bt1">Buy</button>
.bt1 {
color: #232323;
background: transparent;
border: 1px solid #232323;
position: relative;
font-size: 14px;
letter-spacing: .3em;
font-family: 'Montserrat', sans-serif;
padding: 17px 34px 17px 39px;
transition: .2s ease-in-out;
cursor: pointer;
}
.bt1:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 100%;
height: 100%;
background: #32D4E2;
z-index: -1;
transition: .25s ease;
transform: translate(0, 0);
}
.bt1:hover:before {
transform: translate(4px, 4px);
}
Example 2 Button with expand animation using <A> tag
<a href="" class="bt2"><span>link to tutorial</span></a>
.bt2 {
text-decoration: none;
position: relative;
display: inline-block;
height: 50px;
line-height: 50px;
padding: 0 15px;
font-family: monospace;
font-size: 16px;
color: #232323;
}
.bt2 span {
position: relative;
}
.bt2:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 35px;
height: 100%;
background: #C4F1FF;
transition: .3s ease-in-out;
}
.bt2:hover:before {
width: 100%;
}
Example 3 button with icon
<button class="bt3">Checkout</button>
.bt3 {
display: inline-flex;
align-items: center;
font-size: 12px;
letter-spacing: .05em;
font-weight: 600;
text-transform: uppercase;
padding: 12px 20px;
font-family: 'Montserrat', sans-serif;
color: #904C6E;
background: white;
border: 1px solid;
cursor: pointer;
transition: .3s linear;
}
.bt3:hover {
background: #F0C7A7;
}
.bt3:after {
content: "\e82e";
font-family: Linearicons-Free;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 16px;
margin-left: 30px;
padding-left: 20px;
border-left: 1px solid;
}
Example 4 Button with Folding Animation
<a href="" class="bt4">Read more</a>
.bt4 {
text-decoration: none;
display: inline-block;
position: relative;
height: 40px;
line-height: 40px;
padding: 0 20px;
color: white;
font-size: 14px;
background: #383d48;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bt:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: 0;
right: 0;
box-shadow: -1px 1px 1px rgba(0, 0, 0, .4);
transition: .3s;
}
.bt4:hover:before {
width: 20px;
height: 20px;
}
Example 5 Button with box animation
<a href="" class="bt5"><span class="link-content">Read more</span></a>
.bt5 {
text-decoration: none;
display: inline-block;
position: relative;
padding: 15px 30px;
color: #766AD0;
border: 1px solid #3A374C;
font-size: 14px;
font-weight: 700;
white-space: nowrap;
transition: .3s linear;
}
.bt5:before, .bt5:after, .link-content:before, .link-content:after {
content: "";
position: absolute;
z-index: 1;
width: 15px;
height: 15px;
transition: .3s linear;
}
.bt5:before {
left: -1px;
top: -1px;
border-left: 1px solid #614DFF;
border-top: 1px solid #614DFF;
}
.bt5:after {
bottom: -1px;
right: -1px;
border-bottom: 1px solid #614DFF;
border-right: 1px solid #614DFF;
}
.link-content:after {
right: -1px;
top: -1px;
border-right: 1px solid #614DFF;
border-top: 1px solid #614DFF;
}
.link-content:before {
left: -1px;
bottom: -1px;
border-bottom: 1px solid #614DFF;
border-left: 1px solid #614DFF;
}
.bt5:hover {
color: #614DFF;
border-color: #614DFF;
}
Example 6 Button with Shadow effect
<button class="bt6"><span>Buy</span></button>
.bt6 {
background: transparent;
border-width: 0;
position: relative;
cursor: pointer;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
transition: .3s;
}
.bt6 span {
display: block;
position: relative;
z-index: 3;
background: #41294a;
color: white;
padding: 0 30px;
line-height: 40px;
}
.bt6:before {
content: "";
position: absolute;
width: calc(100% + 5px);
height: calc(100% + 5px);
left: -5px;
top: -5px;
background: #ff2c54;
z-index: 1;
transition: .4s ease-out;
}
.bt6:after {
content: "";
position: absolute;
width: calc(100% + 5px);
height: calc(100% + 5px);
right: -5px;
bottom: -5px;
background: #41ebdf;
transition: .4s ease-out .1s;
}
.bt6:hover:before {
transform: translate(5px, 5px);
}
.bt6:hover:after {
transform: translate(-5px, -5px);
}
Example 7 Button with icon animation: Demo
<a class="bt7" href=""><span>Log out</span></a>
.bt7 {
text-decoration: none;
display: inline-flex;
align-items: center;
padding: 15px;
color: #383d48;
}
.bt7 span {
display: block;
overflow: hidden;
max-width: 0;
opacity: 0;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
white-space: nowrap;
letter-spacing: 1px;
line-height: 1;
transition: .4s ease;
}
.bt7:after {
content: '\e886';
font-family: Linearicons-Free;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 22px;
}
.bt7:hover span {
max-width: 150px;
opacity: 1;
margin-right: 6px;
}
Also read:
