7 Beautiful CSS animated buttons

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

animated button with shadow effect
<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

Animated button with 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

CSS 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

CSS button with folding effect
<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

CSS animated button
<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

CSS animated button with shadow
<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

CSS button with moving effect
<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:

About Shahid Siddique

I am a software engineer, a web developer, and WordPress adept. I have 5 years of web experience.