Simple CSS Buttons Pack – CSS Button Styles

You do not like to search for buttons on internet for every project you have. As a web designer, when I start new project I always look on internet to see some good examples especially things CSS Button Styles.

And I would find myself searching for like 30 minutes, wasting time and even not get what I was searching for.

That is why I decided to create This CSS Buttons Pack. Now I have everything 1 click away, even if I want to make some change for specific project, only thing I need to do is to change 2-3 lines of code.

And of course I want to share this with you. This is not just for designers and developers.

You might have website and you want to change your website buttons style, now you can just copy and paste the code snippets from this post and you’ll have new button styles on your website.

CSS Buttons Styles

I have everything on one HTML CSS Project Folder so I’ve included some custom google fonts that you might not want to use. But anyway I’ll post them too for those who want to use it.



Include this inside your <head> </head> tags, if you want same fonts as on images. If you have WordPress theme or something else that is already using Google Fonts, you don’t need this.

<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">

And I want to mention I don’t have hover effect styles for all buttons in CSS Buttons Pack at the moment, but I will include some hover effects and animations in future.

Pack Contain 20 buttons that you might use, I mean almost every standard button style that’s out there.

Lets start with Basic Button Shapes.

Simple and Basic Buttons CSS Style

Simple-and-Basic-Buttons-CSS-Style
Code Snippets for Basic Buttons CSS Styles, only thing you need to do is Copy,Paste and change “Class Name”.

Circle Button CSS

.circle {
 width: 100px;
 height: 100px;
 border: none;
 border-radius: 100px;
 background: #0069eb;
 color: #fff;
 font-size: 16px; }

Round Corners Button CSS

.round {
 background: #0069eb;
 border-radius: 30px;
 border: none;
 color: #fff;
 font-size: 16px;
 padding: 15px 30px;
 text-decoration: none; }

Small Border Radius Button CSS

.curve {
 background: #0069eb;
 color: #fff;
 border-radius: 6px;
 border: none;
 font-size: 16px;
 padding: 15px 30px;
 text-decoration: none; }

Square (No Border Radius) Button CSS

.square {
 background: #0069eb;
 color: #fff;
 border: none;
 border-radius: 0px;
 font-size: 16px;
 padding: 15px 30px;
 text-decoration: none; }

Gradient Buttons CSS Style

Gradient-Buttons-CSS-Style

Now Gradient Buttons that are becoming more popular every day. Gradients in the last couple of years have become a very big trend.




Circle Gradient Button CSS

.circle-grad {
width: 100px;
height: 100px;
background: -webkit-radial-gradient(center, ellipse cover, #f7f7f7 0%, #bababa 100%);
background: -webkit-radial-gradient(center, ellipse, #666 20%, #333 100%);
background: -o-radial-gradient(center, ellipse, #666 20%, #333 100%);
background: radial-gradient(ellipse at center, #666 20%, #333 100%);
color: #fff;
border: none;
border-radius: 100px;
font-size: 16px; }

Round Gradient Button CSS

.round-grad {
background-image: -webkit-gradient(linear, left top, left bottom, from(#57ff03), to(#0dc700));
background-image: -webkit-linear-gradient(top, #57ff03, #0dc700);
background-image: -o-linear-gradient(top, #57ff03, #0dc700);
background-image: linear-gradient(to bottom, #57ff03, #0dc700);
color: #fff;
border: none;
border-radius: 30px;
font-size: 16px;
padding: 15px 30px;
text-decoration: none; }

Curved Gradient Button CSS Style

.curve-grad {
background: #f2f6f8;
background: -webkit-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
color: #333;
border: none;
border-radius: 6px;
font-size: 16px;
padding: 15px 30px;
text-decoration: none; }

Square Gradient Button CSS Style

.square-grad {
background: #cb60b3;
background: -webkit-linear-gradient(top, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%);
color: #fff;
border: none;
border-radius: 0px;
font-size: 16px;
padding: 15px 30px;
text-decoration: none; }

Stroke Buttons Css Style

Stroke-Buttons-Css-Style

Circle Stroke Button Css Style

.circle-stroke {
width: 100px;
height: 100px;
background: none;
color: #333;
border: 1px solid #333;
border-radius: 100px;
font-size: 16px; }

Round Stroke Button Css Style

.round-stroke {
background: none;
color: #0dc700;
border: 1px solid #0dc700;
border-radius: 30px;
font-size: 16px;
padding: 15px 30px;
text-decoration: none; }

Curved Stroke Button Css Style

.curve-stroke {
background: none;
color: #333;
border: 1px solid #333;
border-radius: 6px;
font-size: 16px;
padding: 15px 30px;
text-decoration: none; }

Square Stroke Button Css Style

.square-stroke {
background: none;
color: #db36a4;
border: 1px solid #db36a4;
border-radius: 0px;
font-size: 16px;
padding: 15px 30px;
text-decoration: none; }

Basic Buttons and Button Shapes with Shadow

Basic-Buttons-and-Button-Shapes-with-Shadow

Circle Button with Shadow Button Css Style

.circle-shadow {
width: 100px;
height: 100px;
border: 4px solid #fff;
background: #fff;
border-radius: 100px;
background: -webkit-radial-gradient(center, ellipse cover, #bbb 60%, #111 100%);
background: -webkit-radial-gradient(center, ellipse, #ddd 55%, #bbb 70%);
background: -o-radial-gradient(center, ellipse, #ddd 55%, #bbb 70%);
background: radial-gradient(ellipse at center, #ddd 55%, #bbb 70%);
color: #555;
font-size: 16px;
-webkit-box-shadow: 0px 0px 40px rgba(3, 3, 3, 0.2);
box-shadow: 0px 0px 40px rgba(3, 3, 3, 0.2); }

Round Button with Shadow Button Css Style

.round-shadow {
background: #0069eb;
border-radius: 30px;
border: none;
color: #fff;
font-size: 16px;
padding: 15px 30px;
text-decoration: none;
-webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5); }

Curved Button with Shadow Button Css Style

.curve-shadow {
background: #0069eb;
color: #fff;
border-radius: 6px;
border: none;
font-size: 16px;
padding: 15px 30px;
text-decoration: none;
-webkit-box-shadow: 0px 4px 0px #0091eb;
box-shadow: 0px 4px 0px #0091eb; }

Square Button with Shadow Button Css Style

.square-shadow {
background: #0069eb;
color: #fff;
border: none;
border-radius: 0px;
font-size: 16px;
padding: 15px 30px;
text-decoration: none;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); }

Buttons With Icons – Icon Buttons Css Style

 

Buttons-With-Icons-Icon-Buttons-Css-Style-Original

Circle Button With Icon Css Style

.circle-icon {
width: 100px;
height: 100px;
border: none;
border-radius: 100px;
background: #0069eb;
color: #fff;
font-size: 16px; }

.circle-icon i {
font-size: 32px; }

Round Button With Icon Css Style

.vl is the span class name.

.round-icon {
background: #0069eb;
border-radius: 30px;
border: none;
color: #fff;
font-size: 16px;
padding: 15px 30px;
text-decoration: none; }


.round-icon .vl {
width: 1px;
border-right: 1px solid #fff;
height: 16px;
margin: 0 0 0 10px; }


.round-icon i {
font-size: 16px;
padding-left: 10px;
vertical-align: baseline; }

Curved Button With Icon Css Style

.curve-icon {
background: #0069eb;
color: #fff;
border-radius: 6px;
border: none;
font-size: 16px;
padding: 15px 25px;
text-decoration: none; }

.curve-icon i {
font-size: 14px;
vertical-align: middle;
padding-left: 10px; }

Square Button With Icon Css Style

.square-icon {
background: #0069eb;
color: #fff;
border: none;
border-radius: 0px;
font-size: 16px;
padding: 15px 25px;
text-decoration: none; }

.square-icon i {
font-size: 16px;
vertical-align: baseline;
padding-left: 11px; }

This is my first Css Button Style Pack so you can expect some upgrades on this one in next few weeks.

Check our Simple Buttons CSS v1 DEMO on Codepen

Download HTML CSS (Sass) project files.

Thank you for visiting.

Share on
next post
Leave a Reply