How to Make Awesome Flat Buttons (with CSS) - Comment Redirect How to Make Awesome Flat Buttons (with CSS) - Comment Redirect
Blog
Home / Design / How to Make Awesome Flat Buttons (with CSS)

How to Make Awesome Flat Buttons (with CSS)

26

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

HTML
<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>
CSS
<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

HTML
<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>
CSS
<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>

Recommended Posts

Showing 26 comments

  • kevind
    Reply

    CSS FOR STYLE 1 is the same as your CSS FOR STYLE 2. the class names should be demo-priciing, demo-priciing-1 etc

    Nice post tho.

    • Comment Redirect Team
      Reply

      You’re absolutely right! Thanks for pointing that out, I have updated it now :)

  • Dave
    Reply

    If you displayed the links as inline-blocks you’d be able to change the active state margin to ’1px 0 -2px 0;’, giving the buttons a push down effect. Though there may be an easier way of doing this! I notice your post comment button seems to work in this way.

  • Matt Hammond
    Reply

    Nice design elements – reminds me of the old days when I’d try doing this kind of effect with image files.

  • Rowan
    Reply

    this is really clean and its simple too!

    Good work

    Rowan,

  • Dave
    Reply

    IE11/Win7 seems to have broken this (I think it is ignoring the outline:0 none; … you see whitespace between the button and the box-shadow. Any ideas on how to fix this (I mean work-around IE’s newest irritant!)

  • kris
    Reply

    amazing…thank you

  • Dude
    Reply

    sorry but this buttons are buggy! I´ve tested it and I can only give a bad feedback.

  • fouad
    Reply

    amazing…thank you

  • M.H.POURGHANNAD
    Reply

    thank you

  • todo
    Reply

    Hello There. I found your blog using msn. This is a really well written article.
    I’ll make sure to bookmark it and come back to read more of your useful info.
    Thanks for the post. I will definitely comeback.

  • Jelani
    Reply

    Wow! Really nice site man!

  • Dex Banner
    Reply

    Thanks, we appreciate your articles. Good day!

  • Sandra
    Reply

    Awesome! Thanks for sharing these buttons, I’ll be using one of them in my landing pages, thanks!

    Sandra

  • Eliane
    Reply

    Thanks, great buttons! How I can make a “floating” contact form like the one on this site?

  • iyaah
    Reply

    Look of the button is totally different went I viewed in apple devices such as ipad/iphone? but, it work perfectly fine in android phones. How do i fix this?

  • Siguz
    Reply

    Thank, awesome Buttons. This is the button that I created http://easyhtmlcss.com/?cssid=d09fd4b807844f1f8c1389e8a92cca6c

  • lc-pasaulis.com
    Reply

    Very good post. I’m dealing with many of these issues as well..

  • Beladel Ilyes Abdelrazak
    Reply

    Based on your work, I made those classes to make it easier include theme on web projects http://jsfiddle.net/gwqmsaxg.

pingbacks / trackbacks

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.