Apple Style Buttons using CSS3

Apple Style Buttons using CSS3 : i was hacking some buttons concept in magento , then found that apple has most awesome button design . So i wrote a simple code to design your web buttons like apple . no need of jquery or any java script its completely based on CSS3. here i’ll create different size of buttons .Here is main button class

.buttonnew, .buttonnew:visited {
   	background: url("overlay.png") repeat-x scroll 0 0 #222222;
	    border: 0 solid rgba(0, 0, 0, 0.25);
	    border-radius: 12px 12px 12px 12px;
	    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	    color: #FFFFFF;
	    cursor: pointer;
	    display: inline-block;
	    padding: 5px 10px;
	    text-decoration: none;
	    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}

Here we’ll add uper shiny effect using an image . here is css

.buttonnew, .buttonnew:visited, .medium.buttonnew, .medium.buttonnew:visited {
font:11px/1.5 "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    line-height: 1;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
 background: url("button_colors.png") repeat-x scroll 0 0 transparent;
}

Here is the complete code

.buttonnew, .buttonnew:visited {
   	background: url("overlay.png") repeat-x scroll 0 0 #222222;
	    border: 0 solid rgba(0, 0, 0, 0.25);
	    border-radius: 12px 12px 12px 12px;
	    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	    color: #FFFFFF;
	    cursor: pointer;
	    display: inline-block;
	    padding: 5px 10px;
	    text-decoration: none;
	    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}
.small.buttonnew, .small.buttonnew:visited {
    font-size: 11px;
}
.buttonnew, .buttonnew:visited, .medium.buttonnew, .medium.buttonnew:visited {
font:11px/1.5 "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    line-height: 1;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
 background: url("button_colors.png") repeat-x scroll 0 0 transparent;
}
.large.buttonnew, .large.buttonnew:visited {
    font-size: 14px;
    padding: 8px 14px 9px;
}
.super.buttonnew, .super.buttonnew:visited {
    font-size: 34px;
    padding: 8px 14px 9px;
}
.pink.buttonnew, .magenta.buttonnew:visited {
    background-color: #E22092;
}
.pink.buttonnew:hover {
    background-color: #C81E82;
}
.green.buttonnew, .green.buttonnew:visited {
    background-color: #91BD09;
}
.green.buttonnew:hover {
    background-color: #749A02;
}
.red.buttonnew, .red.buttonnew:visited {
    background-color: #E62727;
}
.red.buttonnew:hover {
    background-color: #CF2525;
}
.orange.buttonnew, .orange.buttonnew:visited {
    background-color: #FF5C00;
}
.orange.buttonnew:hover {
    background-color: #D45500;
}
.blue.buttonnew, .blue.buttonnew:visited {
    background-color: #039909;
}
.blue.buttonnew:hover {
    background-color: #267004;
}
.yellow.buttonnew, .yellow.buttonnew:visited {
    background-color: #FFB515;
}
.yellow.buttonnew:hover {
    background-color: #FC9200;

you can call button in html like this

<button type="button" title="WebKul SofWare"
class="medium buttonnew blue" <span><span><?php echo "WebKul SofWare" ?></span></span></button>

Vipin Sahu 8 Badges

Executionist and Hardcore Planner to drive out best of the best. Want to boost up the E-Commerce industry with his concoct conception.

• 19 May, 2017
  Updated by - Webkul
• 18 Jan, 2012
  Updated by - Vipin Sahu

View More