How to Make Awesome Flat Buttons (with CSS)

Comment Redirect Team

Make Awesome Flat Buttons (with CSS)

Note: You make copy the CSS for these button designs and use them on your own sites and products, with no need for attribution.

If you follow this tutorial, you can have these beautiful buttons on your site in less than 2 minutes.

Style 1

Style 2

You’ve seen them everywhere. The beautiful new flat buttons, with the super smooth transition effects that – let’s face it – just make us want to buy whatever they’re selling.

It’s easy to see the trend to these buttons: They’re simple, they’re elegant, and they usually have some quirkly-but-awesome animation effect. In this tutorial, I will present exactly the kind of button that we’re all blown away by, and give you some step-by-step instructions for how to set this up.

As you can see from the examples above, there is a large shadow at the bottom of the button. The color for this is surprisingly dark compared to the background color of the plugin. This gives a contrast effect that is very prevalent in the flat-design model. Mostly, the colors used are very light pastel, which makes this contrast necessary and effective.

If you like these buttons, be sure to let us know by commenting below, and check out our cool comment redirect plugin!

HTML and CSS for Style 1

<a href="#" class="demo-pricing demo-pricing-1">View Pricing Options</a>
<a href="#" class="demo-pricing demo-pricing-2">View Pricing Options</a>
<a href="#" class="demo-pricing demo-pricing-3">View Pricing Options</a>

<style type="text/css">
.demo-pricing {
	margin-top: 10px;
	margin-right: 10px;
	padding: 14px 26px;
	font-size: 14px;
	line-height: 100%;
	text-shadow: 0 1px rgba(0, 0, 0, 0.4);
	color: #fff;
	display:inline-block;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
	font-weight: bold;
	transition: background 0.1s ease-in-out;
	-webkit-transition: background 0.1s ease-in-out;
	-moz-transition: background 0.1s ease-in-out;
	-ms-transition: background 0.1s ease-in-out;
	-o-transition: background 0.1s ease-in-out;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	color: #fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-family: 'Helvetica Neue', Helvetica, sans-serif;
}
.demo-pricing:active {
	padding-top: 15px;
        margin-bottom: -1px;
}
.demo-pricing, .demo-pricing:hover, .demo-pricing:active {
	outline: 0 none;
	text-decoration: none;
	color: #fff;
}

.demo-pricing-1 {
	background-color: #3fb8e8;
	box-shadow: 0px 3px 0px 0px #3293ba;
}
.demo-pricing-1:hover {
	background-color: #1baae3;
}
.demo-pricing-1:active {
	box-shadow: 0px 1px 0px 0px #3293ba;
}


.demo-pricing-2 {
	background-color: #f06060;
	box-shadow: 0px 3px 0px 0px #cd1313;
}
.demo-pricing-2:hover {
	background-color: #ed4444;
}
.demo-pricing-2:active {
	box-shadow: 0px 1px 0px 0px #cd1313;
}

.demo-pricing-3 {
	background-color: #ff6a80;
	box-shadow: 0px 3px 0px 0px #da0020;
}
.demo-pricing-3:hover {
	background-color: #ff566f;
}
.demo-pricing-3:active {
	box-shadow: 0px 1px 0px 0px #da0020;
}
</style>

HTML and CSS for Style 2

<a href="#" class="demo-info demo-info-1">More Info</a>
<a href="#" class="demo-info demo-info-2">More Info</a>
<a href="#" class="demo-info demo-info-3">More Info</a>

<style type="text/css">
.demo-info {
	padding: 14px 26px;
	font-size: 14px;
	line-height: 100%;
	text-shadow: 0 1px rgba(0, 0, 0, 0.4);
	color: #fff;
	
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
	font-weight: bold;
	transition: background 0.1s ease-in-out;
	-webkit-transition: background 0.1s ease-in-out;
	-moz-transition: background 0.1s ease-in-out;
	-ms-transition: background 0.1s ease-in-out;
	-o-transition: background 0.1s ease-in-out;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	color: #fff;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
	font-family: 'Helvetica Neue', Helvetica, sans-serif;
}
.demo-info:active {
	padding-top: 15px;
}
.demo-info, .demo-info:hover, .demo-info:active {
	outline: 0 none;
	text-decoration: none;
        color: #fff;
}
.demo-info-1 {
	background-color: #fdc058;
	box-shadow: 0px 3px 0px 0px #e29003;
}
.demo-info-1:hover {
	background-color: #fdb53a;
}
.demo-info-1:active {
	box-shadow: 0px 1px 0px 0px #e29003;
}
.demo-info-2 {
	background-color: #aa65c7;
	box-shadow: 0px 3px 0px 0px #883da7;
}
.demo-info-2:hover {
	background-color: #9e4fbf;
}
.demo-info-2:active {
	box-shadow: 0px 1px 0px 0px #883da7;
}
.demo-info-3 {
	background-color: #2ecc71;
	box-shadow: 0px 3px 0px 0px #239a55;
}
.demo-info-3:hover {
	background-color: #28b363;
}
.demo-info-3:active {
	box-shadow: 0px 1px 0px 0px #239a55;
}
</style>

The post How to Make Awesome Flat Buttons (with CSS) appeared first on Comment Redirect Wordpress Plugin with Popup.