12 Modern & Stylish CSS3 Buttons

CSS3 animations, transitions and transforms allow developers to perform all kinds of lightweight magic on web interfaces. This post will show you some examples of button styling with CSS3.

BTNS

This light-weight* css module is a set simple utilities you can use to create a variety of button style links. Easily customize or extend btns.css to fit your sites styles.

btns-10

Buttons

A CSS button library built with Sass & Compass.

flat-button

beautons

a beautifully simple button toolkit.

beauton-12

Creative Button Styles

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.

css3-button-1

Stylish CSS Buttons

There was once a time when graded images with shadows, hover states, and active states were used as buttons. It added some user-friendliness to our forms and whatnot. Nowadays, with CSS3 in the fold and a more compact, minimal style taking precedence, we can achieve stylish CSS buttons.

css3-button-2

Long Shadow Buttons with CSS3 and Sass

In this article I will show you how you can easily make long shadow buttons with CSS3 box-shadow by using Sass.

css3-button-3

Some buttons…

css3-button-4

Twitter Button

css3-button-5

How to Create Windows-8-like animations with CSS3 and jQuery

css3-button-6

Cloud Download Button

css3-button-7

Social buttons with hover

css3-button-8

Animated Ghost Button

When hoverd, the button will transform into a ghost. I guess that’s a real “ghost button”.

css3-button-9

2 Comments

  1. Jvsays:

    great post 🙂

  2. These are neat and sweet! Thanks for sharing 🙂

    Torsten @ http://www.mightytravels.com

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.