Web Design Takeaway: 40 CSS Buttons, Tutorials and Code Snippets
Pure CSS buttons and menus do not need graphics anymore but create themselves from the beauty of the written code. Generating this can be difficult in regard to broad browser compatibility. Thankfully, there are tutorials, ready-made code snippets, and numerous examples to choose from. And it gets even better, as we present you the best examples in this article. What you don’t get in the following article is some Photoshop. All the following buttons are available for private as well as commercial use. As the terms of service are susceptible of change, you should review them again before using the buttons. Have fun…
Developer: Sergio Camalich
Sergio shows the development of a whole range of buttons. These are explained in a tutorial and a demo version. The source code can be downloaded.
In this beginner tutorial, you can trace the development of animated shop-buttons. For example, the price can be shown again as soon as the mouse pointer of the user hovers over the button.
Developer: Bartos Lazarski
CSS Deck offers a broad variety of CSS generators, of which I want to present you this beautiful shop button. HTML and CSS code can be copied easily.
Developer: Valeriu Timbuc
Valeriu Timbuc offers us oval buttons in a variety of colors. The HTML and CSS parts are explained in a step-by-step tutorial.
Developer: Joshua Johnson
In this tutorial, Joshua Johnson shows you how a button can display two further fields during a mouse over. The concept is explained first, followed by the CSS-Code.
Developer: Mary Lou
In this tutorial, a button with different color variants and different icons as eye-catchers is presented. Seven examples with complete CSS code are worked through.
As many as 40 different buttons are presented in this collection, starting with simple 2D buttons, and continuing to complex versions, such as the round button here.
Developer: Martin Angelov
The Bubble Button of Martin Angelov shows small animations during mouse over. In keeping with the name, some bubbles move quickly over the surface of the button.
Cute CSS buttons in candy style. An experimental demo with 3D shapes and glitter effects.
Round social buttons with centered icons are shown in this tutorial. A distinguishing feature is the colored outline of the button.
Developer: Rob Alan
A neutral, gray version and a gaudy red version of a CCS button created by Rob Allen. HTML and CSS code are offered in the article.
Jo’s CSS3 buttons look like 3D keys and react the same way as the ones of a keyboard when clicked.
CSS3 and RGBa gimmicks are used in this tutorial to create a whole series of buttons in various colors.
Developer: Martin Angelov
Martin Angelov presents us a CSS3 menu with animations. Next to the tutorial, there is a demo and download option to delight us.
Developer: Vince Angeloni
In the CSS3 tutorial of Vince Angeloni we can witness the creation of a button, which at first is only partially visible. Only with a mouse over we actually see the content of the button.
Developer: Chris Spooner
In this tutorial, Chris Spooner shows us a simple variant of a CSS button that base on sprites.
This demo shows how a button can turn into a speech bubble quickly. The code is offered as well.
Developer: Nick La
Here, you can access a demo, the data for download as well as an extensive description of the development of this grunge menu by the author.
Developer: Elad Shechter
Elad Shechter simulates the keys of a keyboard. Gray, slightly 3-dimensional and with the typical push-down effect of their real life counterparts.
A bit HTML, much more CSS and you get this button. Very elegant due to the CSS shine.
On cssflow.com, you can discover tags in button form. Complete with a demo, download and an article explaining the development of the buttons.
On codepen.io, numerous CSS buttons and menus are offered, such as this 3-dimensional menu with icons.
A vertical menu with single buttons on a base. Feel free to watch the demo or click on the download button right away.
CSS-Tricks is a button generator that can be operated easily via sliders. In addition to size and roundness, you can also define the routes and mouse over conditions.
A menu list with small badges for notifying in the event of new profiles or messages. Including a demonstration and a download.
Developer: CSS Menu Maker
The CSS Menu Maker offers a variety of styles, which can be adjusted with one click. Subdivided into drop down, flyout, vertical, horizontal, and tabbed.
Beautiful 3D social buttons that just dare you to click them, all the while displaying the number of recommendations on social networks.
Choose from a number of presets for a base menu. You can then adjust it in a few short steps.
Simple social media buttons for easy adjustment – including a demo and a download to support the user.
Glossy CSS buttons in various colors. Demo and download can be reached with one click.
A CSS Button in two variants: light and dark. Again, there is a demo and a download waiting for you.
Developer: CSS Menu Builder
The CSS Menu builder offers some ready-made horizontal and vertical menus. Within four steps you can adjust these including labeling.
Developer: Monji Dolon
After the online demonstration and the download of the files, the CSS and HTML code is explained. Avertical menu with single buttons on a surface is what’s offered here.
Developer: Jeffrey Way
In this tutorial on net.tutsplus.com Jeffrey Way explains how a CSS button with icon can be created. There is also a video tutorial to support learning.
Developer: Jay Patel
Here, you can see the change between the regular button and its clicked version nicely. Creating this effect is discussed extensively in the tutorial.
Developer: Nick La
Nick La shows a mass production of CSS buttons in a myriad of colors, different roundness, and different sizes on his web design wall.
Developer: Mary Lou
More and more often, the user chooses to use an existing account from services like Twitter or Facebook to login to new services. Want to offer that, too? Use this fitting button.
Developer: Hidayat Sagita
Hidayat Sagita presents two variants of his button after the download and demo-option: one with CSS and one with jQuery animation.
Developer: Caleb Ogden
The generator CSS Button Me offers quite a few controls – for borders, gradients, box-shadow, font and more.
Developer: Nicolas Gallagher
Pure social media CSS buttons are, depending on their complexity, difficult to create. Nicolas Gallagher shows how to do it right.