Pure CSS Button Hover Effects Using Animation

Are you looking for cool Pure CSS button hover effects using Animation? If yes then you are in the right article. Here we are going to show you 12 unique stylish examples with source code.

These set of fancy buttons effects look good on all types of browsers and work on small as well as large devices. The button usages the CSS3 animations to create the effect.

You don’t need to write the code from the start, just pick the HTML and CSS and put it into your web page to give a new & fresh look to your website.

Previously, we try to create the Hover Effects for Social Media Icons that are easy to implement.

But in this tutorial, I will provide you details explaining how to create animated hover effects for buttons. You can find the code for the rest of the buttons by downloading the source code.

How to Create Button Hover Effects with CSS

First of all, Let’s take a look at the HTML which is straightforward and easy to understand. Just a div buttons-coll hold all of the buttons HTML source code.

Each button has the general class name custom-btn and then each button also has a unique class name.

For example, here we have the first button HTML.

<div class="buttons-coll">
  <button class="custom-btn btn-1">Read More</button>
</div>

Now Let’s take a look at the CSS. First, we need to create a standard set of CSS styles for buttons. One of the important things is the position: relative; which will help to hold the other elements.

.buttons-coll {
  width: 90%;
  margin: 50px auto;
  text-align: center;
}
button {
  margin: 20px;
}
.custom-btn {
  padding: 10px 25px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  background: transparent;
  outline: none !important;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}

Now for instance, if you want to add only first effect to any of button your website and don’t need any of other effects then simply add the following CSS.

/**** BTN No. 1 ****/
.btn-1 {border: 2px solid #000;}
.btn-1:hover {
  background: #000;
  color: #fff;
}
.btn-1:active {top: 2px;}

That’s it. Similar you can pick the specify CSS from the style.css and add it into your existing stylesheet. If you want to add all of the effects then simply include the style.css into your webpage.