With support for CSS3 increasing with each new release for every browser, and those tiresome CSS2-only browsers slowly dropping off the usage charts, we have far more options for hover effects and transitions in general. Almost all the calls to action that you see on the Web use some form of hover effect, because they draw the eye and make a website feel more engaging.
Last year I brought you a set of 8 simple transitions that will wow your users, and today we’re going to look at 8 more…
Getting started
As before, we’re going to start off with some very simple HTML on which to hang our effects:
<button>Hover Me</button>We’ll also use a core set of CSS styles for all of the transitions and animations. We’re just setting some simple defaults, like background color and font size.
The only really important rule is the last one, transition: all 500ms ease; means that we want all properties to animate when changed, over a period of 500 milliseconds:
button {
border: none;
background: #3a7999;
color: #f2f2f2;
padding: 10px;
font-size: 18px;
border-radius: 5px;
position: relative;
box-sizing: border-box;
transition: all 500ms ease;
}
Now, on to the fun stuff…
1. Horizontal immersion
A style I’ve been seeing more and more of lately is one where a semi-transparent background color makes the button appear to be immersed on hover. It usually comes from one side and transitions until the entire button is covered.
To achieve this we need to make use of the before pseudo element:
button:before {
content:'';
position: absolute;
top: 0px;
left: 0px;
width: 0px;
height: 42px;
background: rgba(255,255,255,0.3);
border-radius: 5px;
transition: all 2s ease;
}
This content is absolutely positioned and placed at the top left of the button. I’ve given it a width of 0px, because that’s what we’ll be animating.
To animate it, we simply set the width:
button:hover:before {
width: 100%;
}
2. Vertical immersion
This effect is very similar to the one above, except that in this case we’ll be animating the height to make the color seem like it’s falling from the top of the button:
button:before {
content:'';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 0px;
background: rgba(255,255,255,0.3);
border-radius: 5px;
transition: all 2s ease;
}
All that really changes here is setting the height instead of the width:
button:hover:before {
height: 42px;
}
3. Ghost button
In this little snippet we’ll add a simple but highly effective transition to the button. The ghost button effect is when we invert the color in the button and add a border:
button:hover {
background: rgba(0,0,0,0);
color: #3a7999;
box-shadow: inset 0 0 0 3px #3a7999;
}
On hover I’ve set the background as transparent so that it picks up the surrounding element background. Then I’ve added the color and a simple box-shadow.
4. Icon animate in
This effect is great for functions, like adding an item to a cart, or submitting a form. What we’ll do is have an icon slide in and appear next to the text, when the user hovers over the button.
The first thing I did was add a little bit more padding to the button to make room for the icon and set the overflow to hidden:
button{
padding: 10px 35px;
overflow:hidden;
}
The next step is adding the cart icon (I’m using Font Awesome for the icon) in the before pseudo-element and position it outside the bounds of the button:
button:before {
font-family: FontAwesome;
content:"\f07a";
position: absolute;
top: 11px;
left: -30px;
transition: all 200ms ease;
}
Now, all we need to do is animate in the icon by setting its left property:
button:hover:before {
left: 7px;
}
5. Bounce effect
In this animation we’re going to set some keyframes for the button so that we have a bounce effect when the user hovers on it. This is always a great way to grab a user’s attention.
First, we need is to create the keyframes:
@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);
}
}
Then we simply apply the animation on hover:
button:hover {
animation: bounce 1s;
}
6. Skew
Skew is definitely one of the most peculiar transforms in CSS3. We’ve had it in Photoshop for years, but getting in in CSS3 was a surprise to say the least.
Nevertheless, it’s an interesting transition and using it is incredibly simple. Just set it on hover:
button:hover {
transform: skew(-10deg);
}
7. Dotted border
This effect is a lot like the ghost button effect, but instead of a uniform border, we get a dotted line.
All we really need to do is add the border to the button and invert its colors:
button {
border: 3px solid #3a7999;
}
button:hover {
border: 3px dotted #3a7999;
color: #3a7999;
background: rgba(0,0,0,0);
}
8. Flip 3D effect
This last effect is a little more complicated since it involves flipping the button over to reveal another message we’ve added in the after pseudo-element of the button.
Let’s start by setting the button’s transform style to preserve-3d so that all the children of the element will preserve their 3D position:
button {
transform-style: preserve-3d;
}
After this we need to take care of our after pseudo element:
button:after {
top: -100%;
left: 0px;
width: 100%;
position: absolute;
background: #3a9999;
border-radius: 5px;
content: 'Flipped';
transform-origin: left bottom;
transform: rotateX(90deg);
}
I’ve added this at the top, before our button, and I’ve also set the width and the border-radius to match our button.
As for the transform properties, I’ve set the the bottom left corner of the element as the point of origin and set its x rotation to 90 degrees, so that it appears flat.
Now all that’s left to do is to create the hover animation:
button:hover {
transform-origin: center bottom;
transform: rotateX(-90deg) translateY(100%);
}
As you can see, to activate the effect I set the transform point of origin at the center, and also rotated the element to apply the transform.
