42 Fantastic Imageless CSS3 Button Scripts

general 8167 Comments

One of the coolest web technologies is CSS3 in web development. With new additions like gradient, text shadow, box shadow and border radius, it is now possible to customize buttons with CSS styling alone and with simple HTML markup. CSS3 buttons with few lines of codes help you in reducing the web development time.

Recommended: Download Free Vector Art(Brushes, PSDs, Photos, Vectors...)

Here are 40+ superb CSS3 buttons scripts to use in your web projects. All you need to do is copy and paste CSS3 codes to your CSS file and you are all set to replace existing image-based buttons with a more flexible, expandable, customizable and editable CSS3 buttons, with the right HTML markup.

Please note that some of the links provided in this article may be affiliate links and we will earn commission if you buy their products through our links.

CSS3 Based Button Styles

1. Button Pro – Css3 Buttons

Button Pro is an easy-to-use and colorful set of buttons made in CSS3 . It degrades nicely on older browsers. Included in the package there is also a set of buttons used by famous web services (google, twitter, facebook, wordpress) recreated in pure CSS3 .

button pro – css3 buttons

2. Amazing Play Button in Css3

Nice and clean CSS3 Play button with great animation effects originally created by Sergio Camalich. The main push able part of this button is given a 3D effect by using box-shadow and borders.

amazing play button in css3

3. Git Css3 Buttons

Git CSS3 Buttons are completely 100% CSS buttons that are just really great looking buttons. I created the buttons for a web app and am sharing them with you now since I loved them so much.

git css3 buttons

4. Css3 Ios Like Buttons

This demo shows iOS-like buttons with just one tag like a, span, button, etc. and only CSS3.You have simple button, prev button, next button and mixed button.

css3 ios like buttons

5. Cross Browser Pure Css3 Button Demo

I've been doing a lot of experimenting recently with CSS3 gradients, box shadows, transitions etc… The result is this set of buttons created entirely from CSS (no images used at all).

cross browser pure css3 button demo

6. Push the Buttons

Pure CSS Push Buttons originally made by Johnie Hjelm. I have improved the code “a lot”. The HTML and CSS codes are much more usable in real world projects now. Easy use of box shadows and linear gradients. The button containers that have gradients are achieved with the :before pseudo element.

push the buttons

7. Build Awesome Practical Css3 Buttons

What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons!

build awesome practical css3 buttons

8. Chunky 3d Css3 Buttons

This is a set of Chunky 3D Pure CSS3 Animated Website Buttons. In the CSS file you will see I've already added some nice colors, this way you don't have to search for the right color for these buttons. This works best in Firefox and Google Chrome. Also, we feature Hundreds of Free PSD's, Icons, Icon Sets, UI/UX design, Illustrator/Vector graphics, CSS, CSS3, JQuery, Photoshop tutorials and tons more.

chunky 3d css3 buttons

9. Web Buttons Pack

Set of over 250 web buttons created with CSS3 and optional jQuery.

web buttons pack

10. Beautiful Pure Css3 Buttons

Beautiful Pure CSS3 Buttons. Simple tutorial showing how to create rounded buttons using CSS3 only

beautiful pure css3 buttons

11. Designer Css Ui Kit

You can find buttons, search fields, tabs, menus, login boxes and tables in different styles that you can use right now in your design projects.

designer css ui kit

12. Css3 Buttons With Icons

Multi colored simple CSS3 buttons with icons. These icons are also made using CSS3 techniques to create shapes. The body of the button consists of two divs (one for container and other for the main body itself) which animates nicely on hover with the use of CSS3 transition property. This transition effect will not work in Internet Explorer as it doesn't support the transitions yet.

css3 buttons with icons

13. Css3 Buttons Pack

The CSS3 Buttons Pack will add a stylish look to your website. You can use the library to make navigations, action buttons for your applications and much more. It is very easy to implement and has a detailed documentation. The buttons degrade nicely on older browsers.

css3 buttons pack

14. Unlimited

A project file enable designers and developers to enhance their websites using the latest technologies in CSS3 and providing a robust elements that works with all the modern browsers ready to you use showing perfect results.

unlimited

15. 3d Download Button

A cool 3D button by James Kyle. This button uses perspective transform to make the button look 3D which works only in webkit browsers. The height to the button is given by using box-shadow with color darker than the base button color. When active or when hovered, the box-shadow's y-offset is lowered to make the button look like its been pressed.

3d download button

16. Css3 Buttons With a Glass Edge

css3 buttons with a glass edge

17. Translucent Css3 Buttons

CSS powered two types of buttons.

translucent css3 buttons

18. Animated Button Element – Css3

5 Color buttons in 3 sizes. Pure css script, no javascript.

animated button element – css3

19. Relevium Series, Button

This file contains Relevium Series, Button in Full CSS3 (without images).

relevium series, button

20. Simple Buttons (Fully Editable)

Full editable Buttons with lot of styles like border size, box-shadow. You can edit / modify almost anything in this button and it will still look great.

simple buttons (fully editable)

21. 3d Buttons

By WebInterfaceLab: a collection of free CSS code snippets.

3d buttons

22. Pressable Css Buttons

Pressable CSS buttons.

pressable css buttons

23. Fancy Dark Css3 Buttons

Pure CSS3 buttons in 6 differents colors.

fancy dark css3 buttons

24. Css3 Animated Icon Rounded Buttons

Css3 bevel animated icon buttons with 15 color themes.

css3 animated icon rounded buttons

25. Bonbon Buttons

BonBon Buttons by Simurai. These buttons are created using a very little markup and have great flexibility. You just need the basic class button to a link element. Additional classes can also be added like orange to get a orange color and glossy to get a glossy finish on the button.

bonbon buttons

26. Animated &Amp; 3d Css3 Button Pack

This CSS3 button pack includes 5 styles of modern animated and 3D buttons with hover and active states. Each style is available in 5 colors for a total of 25 buttons in all. 5 Custom icons included!

animated & 3d css3 button pack

27. Beauttons – Beautiful Css3 Buttons

This project was actually on my to do list. I've created a couple of buttons to a client website a few months ago. Those buttons had the same idea of a icon and text.

beauttons – beautiful css3 buttons

28. Adrianrodriguez / Push_it

push_it - Pure CSS push button

adrianrodriguez / push_it

29. Css3 Colored Buttons

Beautiful colored buttones designed using CSS3.

css3 colored buttons

30. Fb Css3 Buttons – Facebook Look-Alike Buttons

FB CSS3 Buttons are really easy to use, fast, lightweight (3kb minified), and work in most browsers. Just link the style sheet and add the class “fbbutton” to any hyperlink, input or button and you have a really awesome Facebook-style button. There are no images, just one style sheet. Adding FB CSS3 Buttons to your current project is as easy as pie!

fb css3 buttons – facebook look-alike buttons

31. Pure Css3 Dynamic Buttons

Pure CSS3 dynamic buttons.

pure css3 dynamic buttons

32. Graphite Navigation

graphite navigation

33. One Tag Ios Like Buttons

One tag iOS like buttons created purely in CSS3. You just need to add the '.button' class to your 'a' tag to make them look like the ones in the demo.

one tag ios like buttons

34. Social Sprites Icons

Social Sprites Icons is a set of commonly used social icons that transition using CSS ease. This set is super lightweight and could easily be integrated into any website. There are two versions for the icons. One with white background for normal state and a transparent background version.

social sprites icons

35. Multi-Colored Push Buttons

A collection of free CSS code snippets.

multi-colored push buttons

36. Pure Css3 Buttons

When you need to produce stunning buttons for use in modern browsers, use Pure CSS3 Buttons.

pure css3 buttons

37. Silksun Css3 Buttons – 4000 in 1 Jumbo Family Pack

Silksun is a jumbo family pack of 4000+ unique CSS3 buttons. These buttons are available in 7 silk color schemes, where each color scheme contains 599 unique buttons. These buttons differ from each other in terms of size, color, corner style and appearance style.

silksun css3 buttons – 4000 in 1 jumbo family pack

38. Pure Css3 Animated Buttons

We are starting a new column called CSS3 Tricks. We will try to show you some neat tricks that you can use when designing your next website. In our first post we will show you how to create some simple animated buttons with CSS3 only. We will add some Photoshop like effects (shadow, bevel and emboss) and then animate the buttons without any help of JavaScript. I recommend that you download the source files first and check the live demo.

pure css3 animated buttons

39. App Store Buttons 3d

App Store Buttons 3D Kit. All Buttons in Pure Css3 – No Images.

app store buttons 3d

40. Fancy 3d-Button

A simple button, styled with different box-shadows for a 3D-look. The first value of the box-shadow is to give height / depth to the button and the second value is to give shadow to it. There is nothing else in this buttons except this clever use of box shadows.

fancy 3d-button

41. Sinuous Buttons Kit

Simple Buttons is a kit packed with clean and easy-to-use buttons that you can use on any website. The kit comes pre-loaded with the wonderful Font Awesome font. By adding a class property to your a tag, you can convert any link to a functioning button.

sinuous buttons kit

42. Retina Pro: Css3 Retina Business Pro 2 Button Set

Retina Pro is a fantastic retina CSS3 button set, built for any type of website or app. Each button is accompanied with the appropriate retina requirements for optimal viewing on any retina device. Another step towards future-proofing your web presence.

retina pro: css3 retina business pro 2 button set

You are most welcome to suggest any additions to this list. You can use the comments box below to make any suggestions.

themeforest banner
elegant themes banner

Related Articles:

You may be interested in:

Paul Miller is a web design enthusiast and avid blogger who loves to design and explore technology. He has co-founded other interesting blogs like ThinknEarn.com. Make sure to keep in touch with him on Facebook and follow him on Twitter.

Would you like to contribute to this site? Get started »
Rate this article:
(5.0 rating from 1 votes)

Comments