In this post we are going to share 10 awesome CSS buttons. You can just copy and paste the button code and customize it according to your needs. Please feel free to use our CSS buttons. You can also contribute your own CSS buttons if you want.

HTML code

<a href='#' class='your-button-class'>Click me</a>

Example – Pressable button

<a href='#' class='press-btn'>Click me</a>

Pressable CSS buttons

Press able css buttons

.press-btn {
    background-color: #54adea;
    border-radius: 50px;
    box-shadow: 0 0 0 1px #54adea inset, 0 0 0 2px rgba(255,255,255, 0.15) inset, 0 8px 0 0 #3b81b2,0 8px 0 1px rgba(0,0,0, 0.4), 0 8px 8px 1px rgba(0,0,0, 0.5);
    color: #fff;
    display: inline-block;
    font-family: verdana, Arial, sans-serif;
    font-size: 24px;
    font-weight: bold;
    height: 60px;
    line-height: 60px;
    margin: 30px 0 10px;
    position: relative;
    text-align: center;
    text-shadow: 0 -1px 1px rgba(175, 49, 95, .7);
    text-decoration: none !important;
    top: 0;
    width: 200px;
    transition:.20s;
}
.press-btn:hover, .press-btn:focus {
    background-color: #54adea;
    text-shadow: 0 -1px 1px rgba(2, 2, 2, .9), 0 0 5px rgba(255, 255, 255, .8);
    color:#fff;
}
.press-btn:active {
    box-shadow: 0 0 0 1px #444 inset, 0 0 0 2px rgba(255,255,255, 0.15) inset, 0 0 0 1px rgba(0,0,0, 0.4);
    transform:translate(0,8px);
    -ms-transform: translate(0,8px); 
    -webkit-transform: translate(0,8px); 
}

 

Plain CSS buttons

Plain CSS buttons

.pln-btn {
	background:#f55a3e;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	border:1px solid #e74c3c;
	border-bottom:2px solid #e74c3c;
	margin:5px;
	display:inline-block;
	color:#fff;
        font-family:'Gotham A', verdana,georgia, helvetica;
	font-size:16px;
	font-weight:bold;
	font-style:normal;
	height:40px;
	line-height:40px;
	padding:3px 25px 3px 25px;
	text-decoration:none;
	text-align:center;
	position: relative;
}
.pln-btn:hover{
	background:tomato;
	color:#fff;
}

 

Border only button

border only button

.border-btn {
	position: relative;
	background:none;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	border:2px solid #222;
	margin:5px;
	display:inline-block;
	color:#222;
        font-family:verdana,georgia, helvetica;
	font-size:16px;
	font-weight:bold;
	font-style:normal;
	text-decoration:none;
	text-align:center;
	height:40px;
	line-height:40px;
	padding:3px 25px 3px 25px;		
}
.border-btn:hover{
	color:#fff;
	background:#222;
}

 

Yellow themed button

CSS buttons

.yellow-btn {
  display:inline-block;
  background-color: #ffcb08;
  border: 1px solid #815627;
  border-radius:5px;
  box-shadow: 0 3px 0 #815627,0 6px 4px -2px rgba(0,0,0,0.3);
  color: #333;
  font-family: 'Gotham A', Verdana, Arial, sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 24px;
  letter-spacing: .5px;
  padding: 15px 35px;
  cursor: pointer;
  text-decoration:none !important;
}
.yellow-btn:hover{
	color:#333;
}

 

Clean CSS buttons

clean css buttons

.clean-btn {
	background: #e2e2e2; /* Old browsers */
	background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */
	background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
	-webkit-border-radius:100px;
	-moz-border-radius:100px;
	border-radius:100px;
	border:1px solid #dcdcdc;
	margin:5px;
	display:inline-block;
	color:#444;
        font-family:verdana,georgia, helvetica;
	font-size:16px;
	font-weight:bold;
	font-style:normal;
	height:45px;
	line-height:45px;
	padding:3px 17px 3px 17px;
	text-decoration:none;
	text-align:center;
	position: relative;
}
.clean-btn:hover
{
color:#444;
}

 

Glossy CSS Buttons

glossy CSS buttons

.glossy-btn
{
	background: #cb60b3; /* Old browsers */
	background: -moz-linear-gradient(top, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cb60b3), color-stop(50%,#c146a1), color-stop(51%,#a80077), color-stop(100%,#db36a4)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* IE10+ */
	background: linear-gradient(to bottom, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#db36a4',GradientType=0 ); /* IE6-9 */
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	border:1px solid #cb60b3;
	margin:5px;
	display:inline-block;
	color:#fff;
        font-family:verdana,georgia, helvetica;
	font-size:20px;
	font-weight:bold;
	font-style:normal;
	height:35px;
	line-height:35px;
	padding:3px 17px 3px 17px;
	text-decoration:none;
	text-align:center;
	position: relative;
	}
.glossy-btn:hover
{
	color:#fff;
}

 

Android theme buttons

Android theme css buttons

.droid-btn {
	
	background:#74d600;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	border:1px solid #6bb120;
	margin:5px;
	display:inline-block;
	color:#fff;
        font-family:verdana,georgia, helvetica;
	font-size:16px;
	font-weight:bold;
	font-style:normal;
	height:35px;
	line-height:35px;
	padding:3px 17px 3px 17px;
	text-decoration:none;
	text-align:center;
	position: relative;
}
.droid-btn:hover
{
	color:#fff;
}

 

Circular CSS Buttons

Circular buttons

.circle-btn {
	background: #ff3019; /* Old browsers */
	background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* IE10+ */
	background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
	-webkit-border-radius:100px;
	-moz-border-radius:100px;
	border-radius:100px;
	border:2px solid #e74c3c;
	margin:5px;
	display:inline-block;
	color:#fff;
        font-family:verdana,georgia, helvetica;
	font-size:16px;
	font-weight:bold;
	font-style:normal;
	height:100px;
	line-height:100px;
	width:95px;
	padding:3px 7px 3px 7px;
	text-decoration:none;
	text-align:center;
	position: relative;
}
.circle-btn:hover{
	color:#fff;
}

 

Dark theme

image

.dark-btn {
	background: #45484d; /* Old browsers */
	background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #45484d 0%,#000000 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #45484d 0%,#000000 100%); /* IE10+ */
	background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	border:1px solid #444;
	margin:5px;
	display:inline-block;
	color:#fff;
        font-family:verdana,georgia, helvetica;
	font-size:16px;
	font-weight:bold;
	font-style:normal;
	height:45px;
	line-height:45px;
	padding:3px 30px 3px 30px;
	text-decoration:none;
	text-align:center;
	position: relative;
}
.dark-btn:hover
{
color:#fff;
}

 

Girlish CSS Buttons

image

.girlish-btn
{
	background:#ff77aa;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	border-bottom:2px solid #ff5588;
	margin:5px;
	display:inline-block;
	color:#fff;
        font-family:verdana,georgia, helvetica;
	font-size:16px;
	font-weight:bold;
	font-style:normal;
	height:40px;
	line-height:40px;
	padding:3px 50px 3px 50px;
	text-decoration:none;
	text-align:center;
	position: relative;
}
.girlish-btn:hover
{
color:#fff;
}

Leave a Reply

Your email address will not be published. Required fields are marked *