Inspiration for Button Styles and Effects

Today we’d like to share some fresh button styles and effects with you. The current “button trend” is quite exciting since there are a variety of design details in use which allow for a great diversity of styles. There are lots of thin lines but also bold typography and vice versa. The transparent button with a slightly rounded border seems to be quite popular on sites with image backgrounds. But there is no limit to roundedness, everything goes these days, which is great for creating fitting buttons for any design. What they all have in common is simplicity and effect subtleness. We tried to create a balanced set where we don’t animate too much but try to add a sensible effect that goes along with colors and shapes. Some of the styles are a bit bolder — they might fit into some special designs.

In order to keep things overseeable, we’ve chosen to trigger any effect on hover. Some effects might fit better on click, it’s up to you and how you’d like to use the ideas.

We use CSS transitions in most cases but we also have a couple of examples with CSS animations.

This time, we’ve used a kind of modular approach, where we set certain properties like border-radius, font-size, border, etc. in separate classes so that creating a certain button style becomes more simple. If you’d like to use a single style, we’d recommend merging the styles into a single set of class declarations.

The Markup

<button class="button button--ujarak">Vote</button>

The common button styles are the following:

/* Common button styles */
.button {
	float: left;
	min-width: 150px;
	max-width: 250px;
	display: block;
	margin: 1em;
	padding: 1em 2em;
	border: none;
	background: none;
	color: inherit;
	vertical-align: middle;
	position: relative;
	z-index: 1;
}

.button:focus {
	outline: none;
}

.button > span {
	vertical-align: middle;
}

In some cases, we’ll have additional markup like a span or several spans inside of the button. The styles and effects might also be interesting for links; in that case you’ll need to replace the HTML with an anchor and adjust the styles accordingly.

The following classes are available for controlling styles like borders, size and border-radius:

/* Sizes */
.button--size-s {
	font-size: 14px;
}

.button--size-m {
	font-size: 16px;
}

.button--size-l {
	font-size: 18px;
}

/* Typography and Roundedness */
.button--text-upper {
	letter-spacing: 2px;
	text-transform: uppercase;
}

.button--text-thin {
	font-weight: 300;
}

.button--text-medium {
	font-weight: 500;
}

.button--text-thick {
	font-weight: 600;
}

.button--round-s {
	border-radius: 5px;
}

.button--round-m {
	border-radius: 15px;
}

.button--round-l {
	border-radius: 40px;
}

/* Borders */
.button--border-thin {
	border: 1px solid;
}

.button--border-medium {
	border: 2px solid;
}

.button--border-thick {
	border: 3px solid;
}

Note that not all classes make sense for all buttons. Some effects depend on the use of pseudo elements which might be the carriers of the border, for example.
The individual button styles do take care of most cases, though.

Let’s have a look at “Itzel”:

This effect uses a clip-path to cut out a piece of the border of the button’s pseudo-element. This will only work in browsers that support the property which does not include IE for now. For Firefox we need to use a SVG with a clipPath that we define in the HTML.

For the effect we hide the pseudo element that has a clipped area at the bottom by pushing it down with a transform. We’ll pull it back up it’s border width by applying another transform. We can’t see it below because our button has its overflow hidden. The icon is also pushed down in the same way. When we hover, we make the text disappear by setting its opacity to 0 and let the icon slide up through the “hole”.

/* Itzel */
.button--itzel {
	border: none;
	padding: 0px;
	overflow: hidden;
	width: 255px;
}

.button--itzel::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 2px solid;
	border-radius: inherit;
	-webkit-clip-path: polygon(0% 0%, 0% 100%, 35% 100%, 35% 60%, 65% 60%, 65% 100%, 100% 100%, 100% 0%);
	clip-path: url(../index.html#clipBox);
	transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0);
	transform-origin: 50% 100%;
}

.button--itzel.button--border-thin::before {
	border: 1px solid;
	transform: translate3d(0, 100%, 0) translate3d(0, -1px, 0);
}

.button--itzel.button--border-thick::before {
	border: 3px solid;
	transform: translate3d(0, 100%, 0) translate3d(0, -3px, 0);
}

.button--itzel::before, 
.button--itzel .button__icon {
	transition: transform 0.3s;
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}

.button--itzel .button__icon {
	position: absolute;
	top: 100%;
	left: 50%;
	padding: 20px;
	font-size: 20px;
	transform: translate3d(-50%, 0, 0);
}

.button--itzel > span {
	display: block;
	padding: 20px;
	transition: transform 0.3s, opacity 0.3s;
	transition-delay: 0.3s;
}

.button--itzel:hover::before {
	transform: translate3d(0, 0, 0);
}

.button--itzel:hover .button__icon {
	transition-delay: 0.1s;
	transform: translate3d(-50%, -100%, 0);
}

.button--itzel:hover > span {
	opacity: 0;
	transform: translate3d(0, -50%, 0);
	transition-delay: 0s;
}

And that’s the style for the effect.

We hope you enjoy these styles and find them inspiring!