Inspiration for Button Styles and Effects

A collection of fresh button styles and effects for your inspiration. We use CSS transitions and pseudo-elements for most of the effects.

Button Styles Inspiration

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.

Please note that some of the techniques used are only supported in modern browsers. (Mobile) Safari has very little support for the effects.

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”:

ButtonStyle_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.

There are a couple of issues with (Mobile) Safari especially with having a border-radius and overflow hidden. The pseudo-elements don’t seem to respect the hidden overflow (mostly when they are transitioned) and we still have the gap problem that usually got solves with applying -webkit-backface-visibility: hidden. If you find any fix for that, please let us know (best via GitHub).

We hope you enjoy these styles and find them inspiring!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

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

Feedback 35

Comments are closed.
  1. How on earth @Marylou come up with so many ideas every now and then. Amazing!
    I just wish the tutorials/playgrounds are also categorized and indexed properly at some place for learning purposes.

  2. Hi Mary

    Awesome collection. Just thought you’d like to know, a few of them are also very buggy on Safari 6.2.2, OS X 10.8.5.

  3. Awesome work!
    Actually they all seem to work properly in Safari under iOS 8.1.3 (only Naira with rounded corners seems to be messed up)

  4. Buttons. Buttons. Who got da’ buttons?

    Mary Lou got da buttons.

    Buttons. Buttons. Who got da’ buttons?

    I got da buttons.

    Thank you Mary Lou who loves the smell of pepper corns.

    Showing some love from New Orleans.

  5. Very nice!

    I want to make the effect ‘Wapasha’ on an input type=”submit” Element, but that destroys the effect.

    Can someone help me?

    Thank you very much πŸ™‚

    • Hello, I’ve an ipod, usually nothing works on it, but today it worked. Best day of my life. ha! no offense buddy, i’m just kidding πŸ˜€

  6. Thank you for your sharing of this awesome buttons. I’m glad I found this site for inspirations ????

  7. Sorry, but if someone who’s reading that could help me, it could be nice ^^

    I don’t really understand how the animation works… πŸ™
    I’m trying to do the “Sacnite” effect, but some parts for me are blurred.
    What is really changing when my mouse is hover the button ?

    If someone could explain to me the trick ! Thank you.

    P.S : sorry for my english ^^

  8. I want to give ‘Nina’ effect on button whose text is very large like,
    “Sent Mail To Our Friends”. what i do?