From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
Today we would like to give you some button inspiration. This button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others. Mostly, CSS transitions are used but also CSS animations and for some buttons we use a bit of JavaScript to add/remove effect classes.
The icons, which we add using the :before (and sometimes :after) pseudo-class, are from IcoMoon and we’ve created them with the IcoMoon app.
The markup of a button is really simple. We just add specific shared classes:
<button class="btn btn-6 btn-6d">Button</button>
The common styles for all the buttons are some resets defined in .btn and we use the specific numbered classes for the different sets of styles. That numbered class are the shared styles for the sets. Each button has an additional specific class then. When using an icon, we add the icon-class which will use the pseudo element :before to add the character from the icon font.
An example for a specific button style is the following:
/* Button 6d */ .btn-6d { border: 2px dashed #226fbe; } .btn-6d:hover { background: transparent; color: #226fbe; }
Which will of course depend on what we define as a common style in .btn and .btn-6.
This class structure is used for demo purposes. Using a single style, the properties should of course be merged into a single class.
I hope you enjoy the styles and find them inspiring!
Thanks for sharing! Love these buttons…these will be useful π
Awesome!! Thanks a lot Mary π
This is heaven
Exactly!
Nice style but some click effects are useless, because they are stopped at the end of the click, before the end of the animation…
I think they are supposed to be that way, as in part of the design.
Hi. These buttons are really wonderful. I will use it for my website soon. Thank you … =)
odlicno!
Ganz GroΓartige Arbeit, Kompliment!
Great!
Always love your tuts, Mary.. Love you even more! π
gonna try to customize the green button effect with purple color! π
I was never so amazed by the press of a button π Wonderful work!
Wonderful work on these! I especially love the bottom 3D buttons, those are great :3
killer. thanks.
Awesome Work Mary ^_^ Love it!
Awesome/ great/ I adore your design touch )) thank you Mary
Awesome ! as usual !
Thank you to share this with us !
Best regards
Brilliant! Great job.
Just what i needed π Thank you very much.
Nice!
Brilliant! Thanks for sharing this… Have been following your posts and I must admit I love each of your designs!
Thanks!
Great, great and great!!!!
Awesome!
Simply great, nice and minimal π
Really liked them!!!
Cool, thank you!
I love you!
Really nice! Would be even better if they work the same way on mobile browsers.
Love it!
Awesome Buttons. Thanks π
You always have great articles. Keep up the good work!
Beautiful and awesome! these buttons are drop dead gorgeous.
great article “D
Wow, what a great examples. The last 3d button is super awesome.
Superb…
Loved it… π
Great buttons, thx.
Amazing!
I like it.
Thanks so much
Looks like animations don’t work on Safari 6.0.5. Any suggestion?
Thanks for sharing your button ideas Mary Lou. The green order button with the truck appearing is perfect for a project I am working on.
U R AMAZING
Not sure what I would do without seeing your beautiful projects Mary Lou.
like this.. ^_^
like this)))
thanks)
how to add links to this buttons click?
Amazing :O
Stunning work Mary, thank you so much!
This is so hard π
How can I turn these buttons into links instead?
I tried but the icon ends up shifting to the left instead of keeping it’s centered position…
Please Help?
These really are terrific. I created a variation of the 3a button for a site I’m working on and it looks great. Sadly, it seems to require a double tap on a mobile device which would be very confusing to my users (I’m redesigning my site to make it responsive). Can the author or anyone else recommend a general solution to this problem (I’m thinking something with JQuery maybe or even sacrificing whatever is causing the problem for every breakpoint except the desktop/laptop). Thanks!
Great code, but again you put a ?? on IE, do you just not test IE? I mean it supports all these buttons perfectly. If you are running Linux or MAC you can test IE for free and see for yourself, http://www.modern.ie/en-us/virtualization-tools#downloads.
I had a question on your 3D buttons, I wanted to use the it worked/error buttons for a contact form and I’m having trouble getting the buttons to toggle to the correct one based on if they filled out the required information or if the message was sent.
I’m not very good with JavaScript or PHP. If anyone may have any information on how to do it that would be great!
Thanks in advance!
Thank u very much!!! you helped me a lot for various design patterns thank u so much
Hey thanks a lot for these, for some reason they work fine on one site I’m doing with a WP template called atom, but I’m trying to do them in the WP theme Rockefeller and now they don’t work correctly. The text in the button area floats to the top and is outside the circle. any idea?