Home » 16 awesome CSS buttons using HTML and CSS

16 awesome CSS buttons using HTML and CSS

by techmidpoint
16 awesome CSS buttons using HTML and CSS

16 awesome CSS buttons using HTML and CSS

In this tutorial, I am going to show you 16 awesome CSS buttons. Here I have designed different buttons using HTML and CSS. Just copy the given source and paste it into your text editor and run it. You can edit buttons according to your requirement. Please don’t forget to share it.

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS Buttons</title>
<link rel ="stylesheet" href ="style.css">
</head>
<body>
<div class ="container">
	<a href ="#"> Button1</a>
	<a href ="#"> Button2</a>
	<a href ="#"> Button3</a>
	<a href ="#"> Button4</a>
	<a href ="#"> Button5</a>
	<a href ="#"> Button6</a>
	<a href ="#"> Button7</a>
	<a href ="#"> Button8</a>
	<a href ="#"> Button9</a>
	<a href ="#"> Button10</a>
	<a href ="#"> Button11</a>
	<a href ="#"> Button12</a>
	<a href ="#"> Button13</a>
	<a href ="#"> Button14</a>
	<a href ="#"> Button15</a>
	<a href ="#"> Button16</a>
</div>
</body>
</html>

CSS

body{
	background:#262626;
}
.container{
	width:900px;
	padding:7.5% 50px;
	margin:0 auto;
}
a{
	width:180px;
	display:inline-block;
	margin:5% 20px;
	padding:20px 0px;
	text-align:center;
	font-family:Arial;
	font-size:20px;
	color:#fff;
	position:relative;
	
	text-decoration:none;
	letter-spacing:1.5px;
}
a:nth-child(1){
	background:red;
	color:#fff;
	
}
a:nth-child(2){
	background:orange;
	color:#fff;
	border-radius:10px;
}
a:nth-child(3){
	background:purple;
	color:#fff;
	border:2px solid #fff;
	
}
a:nth-child(4){
	background:blue;
	
	border:2px solid #fff;
	border-radius:10px;
}
a:nth-child(5){
	background:green;
	color:#fff;
	border:2px dotted yellow;
}
a:nth-child(6){
	background:green;
	color:#fff;
	border:2px dashed white;
}
a:nth-child(7){
	background:yellow;
	color:#000;
	border-radius:30px 0 30px 0;
}
a:nth-child(8){
	background:orangered;
	color:#fff;
	border-radius:0 30px 0 30px;
	
}
a:nth-child(8):hover{
	background:orange;
}
a:nth-child(9){
	background:green;
	color:#f2f2f2;
	
}
a:nth-child(9)::before{
	content: "";
	width:calc(100% - 16px);
	height:calc(100% - 12px);
	position:absolute;
	left:7px;
	top:5px;
	border:2px dashed #fff;
	
}
a:nth-child(10){
	background:#424242;
	color:#fff;
	
}
a:nth-child(10)::before{
	content: "";
	width:calc(100%);
	height:calc(100% - 14px);
	position:absolute;
	left:0px;
	top:5px;
	border-top:2px dashed yellow;
	border-bottom:2px dashed yellow;
}
a:nth-child(11){
	background:#ff00e4;
	color:#fff;
	border-radius:30px;
	text-align:right;
	width:160px;
	padding-right:20px;
	

}
a:nth-child(11)::before{
	content: "";
	width:calc(40px);
	height:calc(42px);
	position:absolute;
	left:10px;
	top:10px;
	border-radius:20px;
	background:orange;
}
a:nth-child(12){
	
	color:#fff;
	background:#262626;
	border-radius:30px;
	text-align:right;
	width:150px;
	padding-right:20px;
	border:5px solid #fff;
	
}
a:nth-child(12)::before{
	content: "";
	width:calc(40px);
	height:calc(42px);
	position:absolute;
	left:10px;
	top:10px;
	border-radius:20px;
	background:purple;
	
	
}
a:nth-child(13){
	background:linear-gradient(to right, #0c1700, #81f802, #0c1700);
}
a:nth-child(14){
	background:linear-gradient(-45deg,blue,red);
	
}
a:nth-child(15){
	box-shadow:inset 0px 0px  30px blue;
	background:lime;
}
a:nth-child(16){
	
	box-shadow:0 0 30px skyblue;
	
}

For More Tutorials Please Click Here

You may also like

Leave a Comment