From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
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;
}
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
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!
cool ๐
you are the best ^^
thank you mary ๐ great
wow, very impressive.
that looks like a lot of work ๐
Cool! very inspiring ๐
Great work, lots of inspiration! thanks
Great Work! thank you very much for constantly providing us this inspirations!
Thank you! They are really impressive.
Great Work! Full Inspiration and very impressive, Thanks!
This buttons are cool. Great work. they are really giving me inspirations!
Muchas gracias !!! como siempre excelentes tus ideas ๐ ๐ saludos desde Argentina
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.
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.
No words… really awesome… a big salute to Mary Lou
I like it, gonna use it in my next project.
awesome
always you’re the best ๐
Great Work! Very inspiring, Thanks!
Hey dear Mary, You are a great web designer!!
Thanks.
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)
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.
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 ๐
I’ve the same problem. Doesn’t work on input element.
Have you found a solution?
I had the same problem, You can just use the element, good luck!
Thanks for this Nice article.
Nice! It actually worked pretty well on my iPod.
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 ๐
Oh my goddess these things are marvelous.
Thank you, very inspired buttons (I hate you, Safari…).
Thank you for your sharing of this awesome buttons. I’m glad I found this site for inspirations ????
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 ^^
Your work keeps inspiring me. Superb stuff always !
thanks bro, all awesome
I want to give ‘Nina’ effect on button whose text is very large like,
“Sent Mail To Our Friends”. what i do?
NICE?I like this.And I want to thanks the people.
very good