News

Create an expanding diamond hover effect with CSS

Add in a touch of style and imagination to hover effects with the help of pseudo elements and CSS

completebaltics

inspiration: completebaltics.com

The hover effect has been a mainstay of web design almost since the very beginning. What started as simple text decorations, colour changes and old-school image swap effects have evolved over the last few years into an ever-developing series of increasingly sophisticated techniques.

The advent of CSS3, however, has given us access to a brand new array of hover animations and transformations.

This workshop will look at creating an animated hover effect which uses an expanding shape to affect a background colour change on a button. The animation itself is surprisingly simple to implement, but still creates a great effect.

The HTML

Creating the HTML for the button is simple enough, requiring only an href class enclosed within a wrapper. How you position the button wrapper is dependent on your project, but for this demo we’ll need plenty of room for it to breathe. Centred with a healthy top margin will do just fine.

Build the button frame

Most of the hover functions we’re using will be handled using before and after pseudo-elements, so implementation of this next step will only display text styles. However, we are laying the groundwork by arranging some padding and easing for the ‘reverse’ hover effect. The hidden overflow will also be vital for ensuring that the animated diamond does not exceed the button boundaries.

First pseudo-element

The before pseudo-element creates the initial non-hover state for our big red button. By keeping the content property empty, we are effectively creating an empty box with a red background. Using absolute positioning and a strict width and height helps to keep the shape contained, while using a minus z-index ensures that the text will remain visible.

001 .button:before {
002 content: “”;
003 position: absolute;
004 background: rgb(200,8,8);
005 height: 100%;
006 width: 100%;
007 left: 0;
008 top: 0;
009 z-index: -1;
010 }

Second pseudo-element

The after pseudo-element builds the still invisible diamond shape, which will ultimately expand to create the hover effect. Essentially it is a 40px white square, turned at a 45-degree angle and scaled down to 0 by the transform property. Left, top and negative margins centralise the shape within the button. The transition speed matches that of the initial animation.

001 .button:after {
002 content: “”;
003 position: absolute;
004 background: #fff;
005 height: 40px;
006 left: 50%;
007 top: 50%;
008 margin: -20px 0 0 -20px;
009 width: 40px;
010 z-index: -1;
011 transform: rotate(45deg) scale(0);
012 transition: all 400ms ease;
013 }

The hover effect

To activate the hover effect, add the final transform property to the hover state. This scales the diamond up enough so it moves beyond the borders of the button shape. The hidden overflow, mentioned earlier, prevents it from wreaking havoc with the surrounding area. The second hover property simply changes the text colour to that of the original button.

×