Home » Labs » Beautiful CSS flat UI buttons for free download  

Beautiful CSS flat UI buttons for free download


Filed under Labs

Here is a set of beautiful flat UI buttons which is build on pure Cascading Style Sheets (CSS). Below you can find the code used for building this buttons and at the bottom there is link for viewing working example of the code.

CSS

 
.buttons-holder {
  padding-top: 20px;
  text-align: center;
}
.btn {
	border-radius: 5px;
	padding: 10px 25px;
	font-size: 18px;
	text-decoration: none;
	margin: 10px;
	color: #fff;
	position: relative;
	display: inline-block;
}
.btn:active {
	transform: translate(0px, 5px);
	-webkit-transform: translate(0px, 5px);
	box-shadow: 0px 1px 0px 0px;
}
.blue {
	background-color: #2a7fb8;
	box-shadow: 0px 2px 0px 0px #226897;
}
.blue:hover {
	background-color: #359de3;
}
.light-blue {
	background-color: #5aa7f5;
	box-shadow: 0px 2px 0px 0px #4e94db;
}
.light-blue:hover {
	background-color: #82bdf9;
}
.green {
	background-color: #2ecc71;
	box-shadow: 0px 2px 0px 0px #15B358;
}
.green:hover {
	background-color: #48E68B;
}
.red {
	background-color: #f43230;
	box-shadow: 0px 2px 0px 0px #ca4538;
}
.red:hover {
  background-color: #fe6051;
}
.purple {
	background-color: #9b59b6;
	box-shadow: 0px 2px 0px 0px #82409D;
}
.purple:hover {
	background-color: #B573D0;
}
.orange {
	background-color: #ff9600;
	box-shadow: 0px 2px 0px 0px #eb8b03;
}
.orange:hover {
	background-color: #ffa729;
}
.yellow {
	background-color: #fddc00;
	box-shadow: 0px 2px 0px 0px #ecce03;
}
.yellow:hover {
	background-color: #feed2f;
}
.black {
	background-color: #474646;
	box-shadow: 0px 2px 0px 0px #2e2d2d;
}
.black:hover {
	background-color: #616060;
}
.button-small {
	padding: 5px 15px;
	font-size: 12px;
}
.button-large {
	padding: 10px 25px;
	font-size: 22px;
}

HTML

 
		<!-- buttons set 1 -->
		<div class="buttons-holder">
		<h2> Buttons Small</h2>
			<a href="#" class="btn blue button-small">Blue Button</a>
			<a href="#" class="btn light-blue button-small">Light Blue Button</a>
			<a href="#" class="btn green button-small">Green Button</a>
			<a href="#" class="btn red button-small">Dark Red Button</a>
			<a href="#" class="btn purple button-small">Purple Button</a>
			<a href="#" class="btn orange button-small">Orange Button</a>
			<a href="#" class="btn yellow button-small">Yellow Button</a>
			<a href="#" class="btn black button-small">Black Button</a>
		</div>		
 
		<!-- buttons set 2 -->
		<div class="buttons-holder">
		<h2> Buttons Medium</h2>
			<a href="#" class="btn blue">Blue Button</a>
			<a href="#" class="btn light-blue">Light Blue Button</a>
			<a href="#" class="btn green">Green Button</a>
			<a href="#" class="btn red">Dark Red Button</a>
			<a href="#" class="btn purple">Purple Button</a>
			<a href="#" class="btn orange">Orange Button</a>
			<a href="#" class="btn yellow">Yellow Button</a>
			<a href="#" class="btn black">Black Button</a>
		</div>		
 
		<!-- buttons set 3 -->
		<div class="buttons-holder">
		<h2> Buttons Large</h2>
			<a href="#" class="btn blue button-large">Blue Button</a>
			<a href="#" class="btn light-blue button-large">Light Blue Button</a>
			<a href="#" class="btn green button-large">Green Button</a>
			<a href="#" class="btn red button-large">Dark Red Button</a>
			<a href="#" class="btn purple button-large">Purple Button</a>
			<a href="#" class="btn orange button-large">Orange Button</a>
			<a href="#" class="btn yellow button-large">Yellow Button</a>
			<a href="#" class="btn black button-large">Black Button</a>
		</div>

Demo Download

Posts you may like: