Ideas for CSS Button Hover Animations

Some inspiration for button hover animations using CSS only.
buttonstyles

From our sponsor: Looking for an intuitive whiteboard style project management tool? Give Shortcut a try for free.

After exploring some hover animations for links using CSS only, I also wanted to make some button animation using some interesting CSS techniques like animating a clip path or applying a mix-blend-mode.

The following button uses a mix of a fancy border radius and a clip path animation. Note that I’m using SVG path data for the clip path and animating to another path seems to work already, so this is such a cool thing and allows for so many great effects!

.button {
	pointer-events: auto;
	cursor: pointer;
	background: #e7e7e7;
	border: none;
	padding: 1.5rem 3rem;
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	position: relative;
	display: inline-block;
}

.button::before,
.button::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.button--janus {
	font-family: freight-display-pro, serif;
	font-weight: 900;
	width: 175px;
	height: 120px;
	color: #fff;
	background: none;
}

.button--janus::before {
	content: '';
	background: #e6e6e6;
	-webkit-clip-path: path("M154.5,88.5 C131,113.5 62.5,110 30,89.5 C-2.5,69 -3.5,42 4.5,25.5 C12.5,9 33.5,-6 85,3.5 C136.5,13 178,63.5 154.5,88.5 Z");
	clip-path: path("M154.5,88.5 C131,113.5 62.5,110 30,89.5 C-2.5,69 -3.5,42 4.5,25.5 C12.5,9 33.5,-6 85,3.5 C136.5,13 178,63.5 154.5,88.5 Z");
	transition: clip-path 0.5s cubic-bezier(0.585, 2.5, 0.645, 0.55), -webkit-clip-path 0.5s cubic-bezier(0.585, 2.5, 0.645, 0.55), background 0.5s ease;
}

.button--janus:hover::before {
	background: #000;
	-webkit-clip-path: path("M143,77 C117,96 74,100.5 45.5,91.5 C17,82.5 -10.5,57 5.5,31.5 C21.5,6 79,-5.5 130.5,4 C182,13.5 169,58 143,77 Z");
	clip-path: path("M143,77 C117,96 74,100.5 45.5,91.5 C17,82.5 -10.5,57 5.5,31.5 C21.5,6 79,-5.5 130.5,4 C182,13.5 169,58 143,77 Z");
}

.button--janus::after {
	content: '';
	height: 86%;
	width: 97%;
	top: 5%;
	border-radius: 58% 42% 55% 45% / 56% 45% 55% 44%;
	border: 1px solid #000;
	transform: rotate(-20deg);
	z-index: -1;
	transition: transform 0.5s cubic-bezier(0.585, 2.5, 0.645, 0.55);
}

.button--janus:hover::after {
	transform: translate3d(0,-5px,0);
}

.button--janus span {
	display: block;
	transition: transform 0.3s ease;
	mix-blend-mode: difference;
}

.button--janus:hover span {
	transform: translate3d(0,-10px,0);
}

There are some initial button styles for all our buttons (you can simplify that if you’re just using one of them, of course). So on hover, we morph from one path to another using a bouncy timing function.

The other shape uses a fun border radius that makes it look like a blob. This button is a great example for how different techniques can create a similar look. For me, that’s the beauty of CSS — there are just so many different possibilities and never just one way to do things.

In this example, I wanted to have a border around the shape, and with a clip path that’s not possible. So, I used some goofy border radius values to create the look.

These great tools helped me do this:

One word of caution when using a clip path directly on a button element: if you have some kind of focus styles around the button, they will be cut off. So it’s probably better if you use clipping on another (pseudo) element.

Another button style that I was itching to experiment with, was that rotating badge-like thing that can be seen on many sites these days. Here I used some text on a circle path in SVG with the help of the great article by Amelia Bellamy-Royds, Perfecting Paths for <textPath>.

Check out the result:

I really hope these buttons bring you some joy! Let me know if you have any questions or if you want to show me what you do with these by sending me a tweet @crnacura or @codrops!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.