article:
Elements Design: Flat Design User Interface Elements (PSD)
article:
Elements Design: Business Icons Clean Set (AI)

Elements Design & Code: Flat Buttons (PSD / HTML / CSS3)

Advertisement

A “flat button” is something that can be pretty simple in concept, but the combination of a friendly font, and a miniature icon, really gives these a fun look and feel.

A colourful little set of buttons, each complete with an accompanying icon — Add to Cart, Buy Now, Download, Buy Album, Favorite, and Comment. - pixelsdaily


Preview


Resource: Flat Buttons (PSD / HTML / CSS3)


Implementation

CSS3

body{background:url('background.png') no-repeat;background-size:cover;}
#wrapcenter{width: 750px; height: 200px; position: absolute; left: 50%; top: 50%; margin: -100px 0 0 -375px;}
li {list-style-type: none; overflow: hidden; float: left; width: 200px; margin: 10px;}
li a {display: -webkit-flex; padding: 20px 30px; overflow: hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-size: 19px; color: #ffffff; text-decoration: none;}
li a img {padding-right: 10px;}
.blue {background:#468cd3;} .blue:hover {background:#59A5EC;}
.red {background:#ef3d56;} .red:hover {background:#F57A8F;}
.darkblue {background:#38495a;} .darkblue:hover {background:#6C7985;}
.pink {background:#c956b2;} .pink:hover {background:#E252C7;}
.yellow {background:#f0ca44;} .yellow:hover {background:#FABE0A;}
.green {background:#85c25d;} .green:hover {background:#63B925;}



HTML

<div id="wrapcenter">
    <ul>
        <li><a href="#" class="blue"><img src="cart.png" width="21" height="21">Add to cart</a></li>
        <li><a href="#" class="red"><img src="tag.png" width="23" height="23">Buy now</a></li>
        <li><a href="#" class="darkblue"><img src="download.png" width="29" height="21">Download</a></li>
        <li><a href="#" class="pink"><img src="cd.png" width="23" height="23">Buy album</a></li>
        <li><a href="#" class="yellow"><img src="favorite.png" width="22" height="21">Favorite</a></li>
        <li><a href="#" class="green"><img src="comment.png" width="20" height="20">Comment</a></li>
    </ul>
</div>



Easy to customise for your own design!

This resource is very easy to customize.

We would appreciate it if you credit our resources and help us to spread our work and name.




download psd
download html
demo
source psd

Advertisement
Tags: flat design, psd, html5, css3, add to cart, buy now, download, buy album, favorite, comment, buttons, elements, interface, creative3x

Leave a Comment

No Comment

© Creative3x Ltd.