Today I am going to tell how to create a App Store Button with css3. I have designed four buttons

App Store Button using CSS3

App Store Button using CSS3

View Demo Download

  1. Apple App Store Button
  2. Iphone App Store Button
  3. Android App Store Button
  4. Blackberry App Store Button
  5. Windows App Store Button

CSS3 Code

body {
	font-size: 13px;
	font-family: "Helvetica Neue", helvetica, sans-serif;
	background: #fff;
}
.button {
	padding: 10px 15px 10px 15px;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	display: inline-block;
	width: 140px;
	text-align: left;
	text-shadow: 1px 1px rgba(0, 0, 0, 0.85);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-bottom: 5px;
	margin-right: 2px;
}
.button span.icon {
	width: 30px;
	height: 35px;
	display: block;
	background: url('button_icons.png') no-repeat top left;
	float: left;
	margin-right: 12px;
}
.button em {
	font-size: 10px;
	font-weight: bold;
	display: block;
	color: #fff;
	text-shadow: 0px 1px rgba(255, 255, 255, 0.65);
	font-style: normal;
}
.button:active {
	-webkit-box-shadow: inset 0px 0px 7px #333;
	-moz-box-shadow: inset 0px 0px 7px #333;
	box-shadow: inset 0px 0px 7px #333;
}
.button#apple {
	background: #2cbbfd; /* Old browsers */
	background: -moz-linear-gradient(top, #2cbbfd 0%, #006b9d 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2cbbfd), color-stop(100%, #006b9d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #2cbbfd 0%, #006b9d 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #2cbbfd 0%, #006b9d 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #2cbbfd 0%, #006b9d 100%); /* IE10+ */
	background: linear-gradient(top, #2cbbfd 0%, #006b9d 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2cbbfd', endColorstr='#006b9d', GradientType=0 ); /* IE6-9 */
}
.button#apple em {
	color: #065478;
}
.button#apple:hover {
	background: #4cc6ff; /* Old browsers */
	background: -moz-linear-gradient(top, #4cc6ff 0%, #0078b0 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4cc6ff), color-stop(100%, #0078b0)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #4cc6ff 0%, #0078b0 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #4cc6ff 0%, #0078b0 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #4cc6ff 0%, #0078b0 100%); /* IE10+ */
	background: linear-gradient(top, #4cc6ff 0%, #0078b0 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4cc6ff', endColorstr='#0078b0', GradientType=0 ); /* IE6-9 */
}
.button#android {
	background: #98d463; /* Old browsers */
	background: -moz-linear-gradient(top, #98d463 0%, #66891d 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #98d463), color-stop(100%, #66891d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #98d463 0%, #66891d 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #98d463 0%, #66891d 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #98d463 0%, #66891d 100%); /* IE10+ */
	background: linear-gradient(top, #98d463 0%, #66891d 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#98d463', endColorstr='#66891d', GradientType=0 ); /* IE6-9 */
}
.button#android em {
	color: #436c01;
}
.button#android span.icon {
	background-position: 0px -35px;
}
.button#android:hover {
	background: #9dda67; /* Old browsers */
	background: -moz-linear-gradient(top, #9dda67 0%, #70971f 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9dda67), color-stop(100%, #70971f)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #9dda67 0%, #70971f 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #9dda67 0%, #70971f 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #9dda67 0%, #70971f 100%); /* IE10+ */
	background: linear-gradient(top, #9dda67 0%, #70971f 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dda67', endColorstr='#70971f', GradientType=0 ); /* IE6-9 */
}
.button#windows {
	background: #f7a553; /* Old browsers */
	background: -moz-linear-gradient(top, #f7a553 0%, #c67524 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7a553), color-stop(100%, #c67524)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #f7a553 0%, #c67524 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #f7a553 0%, #c67524 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #f7a553 0%, #c67524 100%); /* IE10+ */
	background: linear-gradient(top, #f7a553 0%, #c67524 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7a553', endColorstr='#c67524', GradientType=0 ); /* IE6-9 */
}
.button#windows em {
	color: #9c5918;
}
.button#windows span.icon {
	background-position: 0px -70px;
}
.button#windows:hover {
	background: #fca14b; /* Old browsers */
	background: -moz-linear-gradient(top, #fca14b 0%, #c5650b 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fca14b), color-stop(100%, #c5650b)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #fca14b 0%, #c5650b 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #fca14b 0%, #c5650b 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #fca14b 0%, #c5650b 100%); /* IE10+ */
	background: linear-gradient(top, #fca14b 0%, #c5650b 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fca14b', endColorstr='#c5650b', GradientType=0 ); /* IE6-9 */
}
.button#blackberry {
	background: #525252; /* Old browsers */
	background: -moz-linear-gradient(top, #525252 0%, #18171e 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #525252), color-stop(100%, #18171e)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #525252 0%, #18171e 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #525252 0%, #18171e 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #525252 0%, #18171e 100%); /* IE10+ */
	background: linear-gradient(top, #525252 0%, #18171e 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#525252', endColorstr='#18171e', GradientType=0 ); /* IE6-9 */
}
.button#blackberry em {
	color: #9a9a9a;
	text-shadow: 0px 1px #000;
}
.button#blackberry span.icon {
	background-position: 0px -105px;
}
.button#blackberry:hover {
	background: #616161; /* Old browsers */
	background: -moz-linear-gradient(top, #616161 0%, #222222 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #616161), color-stop(100%, #222222)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #616161 0%, #222222 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #616161 0%, #222222 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #616161 0%, #222222 100%); /* IE10+ */
	background: linear-gradient(top, #616161 0%, #222222 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#616161', endColorstr='#222222', GradientType=0 ); /* IE6-9 */
}
.button:hover {
	color: #fff;
}
a {
	text-decoration: none;
	outline: none;
}

HTML Usage

<a href="#" class="button" id="apple" ><span class="icon"></span><em>Download now for</em>iPhone</a>
<a href="#" class="button" id="android" ><span class="icon"></span><em>Download now for</em>Android</a>
<a href="#" class="button" id="windows" ><span class="icon"></span><em>Download now for</em>Windows</a>
<a href="#" class="button" id="blackberry" ><span class="icon"></span><em>Download now for</em>Blackberry</a>

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

View Demo Download

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2013/01/free-css3-app-store-buttons.pnghttp://w3lessons.info/wp-content/uploads/2013/01/free-css3-app-store-buttons-150x150.pngKarthikeyan KCSS3FreebiesCSS3,Design
Today I am going to tell how to create a App Store Button with css3. I have designed four buttonsView Demo DownloadApple App Store Button Iphone App Store Button Android App Store Button Blackberry App Store Button Windows App Store ButtonCSS3 CodeHTML UsagePlease don’t forget to share and subscribe to latest updates of...