Pure CSS3 Button With Clean Design

Today we’ll be creating a simple & clean 3D CSS3 button. This button has been created purely in CSS3 & no JavaScript functions or jquery has been used. This CSS3 button uses a CSS class .submit and the active selector for the class selector. The active selector has been used for the 3D effect when the button has been clicked.

Fullscreen Result: http://jsfiddle.net/8qGqv/64/embedded/result/

Live Preview with CSS3 code: http://jsfiddle.net/8qGqv/64/

The markup of the button is really simple, it just makes use of the class .submit

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

The style of the button is defined inside the class .submit and .submit:active

The CSS3 Code


I hope you enjoy the styles and find them inspiring!

Thanks for reading and do subscribe to the blog feed for more amazing posts. You can find the subscription box below.

2 Replies to “Pure CSS3 Button With Clean Design”

Comments are closed.