Web designers no longer need to rely on Photoshop for creating awesome buttons. With CSS3 you can manipulate everything from background gradients to drop shadows and glossy/shiny effects. We’ve organized 10 unique CSS button collections & snippets from CodePen which you can study and freely use in your own web projects.
 |
| Beautiful CSS Buttons |
1. Plastic Buttons
This button set is clean and to the point. You can rework any of these buttons with ease since they come in many different colors & sizes.
You can pick from small, medium, or large buttons each with different styles. You have the default buttons, the disabled buttons, and button rows designed like switches or tabs. For a pure CSS solution this is one of the cleanest button styles on the web.
2. Cool Buttons
These cool buttons, made by Felipe Marcos, are slightly different than the plastic buttons above, yet they’re just as easy to use. They don’t have a shiny plastic design but they do still have the “push” effect when clicked.
You can pick from six pre-designed colors or customize your own. The CSS is split into different class names so you can setup the default button styles on one class and alternate the colors with other classes.
3. Google Buttons
Google’s online tools like Blogger, Drive, Gmail, and their search feature all have different button styles. And developer Tim Wagner cloned these styles in this pen.
They’ve been built entirely in CSS3 and these buttons demonstrate many Google-inspired effects you can build that all look fantastic. There’s a similar example created by Monkey Raptor expanding on these buttons while adding a few others into the mix.
4. Bunch-o-Buttons
Another plastic-style glossy button set can be found in this pen created by Alan Collins. It supports multiple colors and has different styles for small, medium, and large buttons.
What makes this set unique is how you can switch between the glossy style and the flat style with one class. Most buttons come in one “style” but you can enable or disable the glossy design with a single CSS class&emdash;talk about convenient!
5. Social Buttons
This snippet is perhaps the definitive collection of social buttons with unique color schemes & branded icons.
Developer Stan Williams released this set on GitHub with updated colors and newer buttons. However this demo is a clear indicator of his quality featuring well over 50 different buttons. They all have a shiny gradient as the background but the degree and quality differs greatly.
Still a fun CSS-only button pack to use if you need social sharing on your website.
6. Jelly Animation
At first glance this may look like an ordinary button. But the jelly button has a very special animation effect tied to the click event handler.
Aside from the incredibly entertaining animation I’m also impressed by the semi-realistic button shadow underneath. It animates along with the button making this the perfect call-to-action for any startup site or social network.
7. Parallax Button
Tobias Reich created this sweet parallax button using CSS3 radial gradients and some pretty wacky colors.
On its own, the CSS3 button is impressive. The entire background and drop shadow are created solely through CSS. But with a bit of JavaScript Tobias was able to add parallax distortion on hover & click.
This is one of the more advanced button effects I’ve seen in a while and it can blend nicely into any webpage.
8. Hubspot Pills
Developer Joe Henriod created these buttons based on Hubspot’s design. They function just like traditional HTML buttons yet they’re built using CSS classes which can be applied to any element.
This set uses red & blue pill buttons in reference to The Matrix, but you can change the colors to anything you like. And the hover+click states are flamboyant enough to capture anyone’s attention.
9. Sexy SCSS Buttons
Most frontend coders use Sass/SCSS because it offers more control and it’s far easier to write than traditional CSS. These SCSS buttons are built to last and impressively detailed with inner & outer drop shadow effects.
You can change the color with a single class and even add your own into the mix. The hover states make the buttons feel 3D along with the active states when they’re pushed down into the page.
These buttons should be easy to implement on any website and you can even convert the SCSS into CSS right from CodePen.
10. Mozilla-Style Buttons
Mozilla’s website underwent a heavy rebrand which moved away from their traditional plastic-style buttons. I loved their original design and thankfully it lives on with this snippet made by Felix Schwarzer.
The blue triangle shape is actually created with pure CSS along with the background gradient and 3D bevel effect. These buttons are heavily stylized and they’re so well-designed they’re sure to draw attention.
Further Resources
These 10 buttons are all unique and easy to customize for any layout. Since they’re designed purely with CSS3 you can change their size, color, and styles to blend into projects for businesses, blogs, social networks, or eCommerce stores.
But whittling this list down to 10 was tough considering all the incredible snippets out there. If you’re looking for more you can browse CodePen to see even more pure CSS buttons.
Test 12
ReplyDeleteThanks For Supporting 😇😇😇
Delete