Creative Button Styles

Some creative and modern button styles and effects for your inspiration.
Creative Button Styles

From our weekly sponsor: Design every part of your website with the brand new Divi Theme Builder. Try it for free.

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.

Please note: this only works as intended in browsers that support the respective CSS properties.

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!

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.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 77

Comments are closed.
  1. Really nice! Would be even better if they work the same way on mobile browsers.

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