Create a cool button with smooth hover effect

Buttons are one factor that makes the webpages look user friendly and therefore needs to be presented well in the page. Also the buttons should look perfect to the design and color of the page.

In this tutorial, i will be showing a button with a smooth hover effect and will be flexible to most of the webpage design.

First create your button

<a class="button">
    Click Me
</a>

And then define the CSS for the class ‘button’,

.button {
  color:rgb(255,255,255);
  text-decoration:none;
  padding:1%;
  padding-left:3%;
  padding-right:3%;
  border-radius:5px;
  border:rgb(255,255,255);
  border-style:solid;
  font-size:14px;
  -webkit-transition: background-color .3s ease-out;
  -moz-transition: background-color .3s ease-out;
  -o-transition: background-color .3s ease-out;
  transition: background-color .3s ease-out;
}
.button:hover{
  background-color:rgb(255,255,255);
  color:rgb(153,153,153);
}

The colors defined in the above example is best suitable for a button in a dark background. Therefore change the colors to best suit for your webpages; and similarly the time delay of hover effect in transition property which is set to .3s in the above example.