8 Easy CSS Hover Effects

Adding CSS hover effects to a web site is a great way to draw the attention of the users and make the website to be more engaging. In this article, you will learn how to do 10 simple CSS hover effects for your web site or blog.

Before we start, we will set up a button with some Html and Css with very simple rules on it.

For this article we will use the core CSS styles for all of the transitions and animations.

<button>Hover Effects</button>

button {
  border: none;
  background: #ff7a59;
  color: #fff;
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  position: relative;
  box-sizing: border-box;
  transition: all 500ms ease; 
}

Now let's see some easy CSS3 hover effects.

Ghost Button

We will start with the simplest hover effects of all, ghost button which change the color of the button on hover. This CSS hover effect is simple but very effective, great for almost every action button. To do it we just add a :hover on it with different values from the original:

button:hover{
  color: #ff7a59;
  border: #ff7a59 solid 1px;
  background:#fff;
}

Animate Icon In

This effect is great to be used for functions, for example when doing some actions like submitting some form. This effect is a sliding icon that will appear next to the text when you hover over the button. Firstly we will add more padding because we need more room for the icon, also we will set the overflow to hidden:

button{ 
  padding: 10px 40px;  
  overflow:hidden;
}

The next step is to add some icon (you can use Font Awesome) and in the ::before pseudo-element and set the position outside the button.

button:before {
  font-family: FontAwesome;
  content:"\f07a";
  position: absolute;
  top: 11px;
  left: -30px;
  transition: all 300ms ease;
}

The last thing which we need to do is to animate in the icon with setting the left property:

button:hover:before {
  left: 7px;
}

Fade In

Fade In effect is fairly commonly used because it is a great CSS effect to draw user attention to a call to action. Fade-in effects are in two steps, the initial phase, and the hover phase:

button{
  opacity:0.5;
}
button:hover{
  opacity:1;
}

Grow In

Like the previous effect, this one is also great for getting the user's attention for a call to action because the button will grow when it hovers.

button:hover{
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

Bounce

For this animated CSS effect, we are going to use some keyframes for the button to enable a bounce effect when it hovers. This effect is always effective for grabbing the user's attention.

@keyframes bounce {
  0%, 20%, 60%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}

And lastly, we just need to apply the animation on hover:

button:hover {
  animation: bounce 1s;
}

Skew

Another great transition in CSS3 is the skew. Using this transition effects is incredibly simple, we just need to set it on hover:

button:hover {
  transform: skew(-10deg);
}

Highlight Border

This hover effect is very much similar to the ghost button, here instead of the regular border we will be doing a dotted border:

button {
  border: 3px solid #ff7a59;
}

button:hover {
  border: 3px dotted #ff7a59;
  color: #ff7a59;
  background: #fff;
}

Flip 3D

Our last effect will make the button flipping over to show a message, which will be added in the after pseudo-element of the button. To do that, firstly we will set the button’s transform style to preserve-3d so that children of the element will preserve their 3D position:

button {
  transform-style: preserve-3d;
}

Next, we will set up the pseudo-element:

button:after {
  top: -100%;
  left: 0px;
  width: 100%;
  position: absolute;
  background: #ff7a59;
  border-radius: 5px;
  content: 'Flipped';
  transform-origin: left bottom;
  transform: rotateX(90deg);
}

And in the end, we just need to create the hover animation:

button:hover {
  transform-origin: center bottom;
  transform: rotateX(-90deg) translateY(100%);
}

As you can see every CSS transition effect we have seen takes just a couple of minutes to be set up in any project, some of them can be done even in secondes!. I find the article helpful please share it.