CSS Download Buttons
== Style 1 ==
- CSS:
<style>
.dropbutton {
/* main class */
height: 48px;
width: 200px;
font: bold 16px/48px arial;
margin-bottom: 60px;
position: relative;
}
/* ===============================
========= BLUE STYLE =========
===============================
================================================== */
.blue:first-child {
/* styling for the left part */
padding: 7px;
float: left;
width: 32px;
height: 32px;
/* border radius */
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
/* backgorund */
background: -webkit-gradient(linear, left top, left bottom, from(#87deff), to(#40a9fd));
background: -moz-linear-gradient(#87deff, #40a9fd);
background-color: #40a9fd;
/* shadows and highlights */
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
border: 1px solid #008af5;
}
.dropbutton:hover .blue:first-child {
background: -webkit-gradient(linear, left top, left bottom, from(#b1eaff), to(#68bcff));
background: -moz-linear-gradient(#b1eaff, #68bcff);
background-color: #68bcff;
}
.dropbutton:active .blue:first-child {
background: -webkit-gradient(linear, left top, left bottom, from(#68bcff), to(#87deff));
background: -moz-linear-gradient(#68bcff, #87deff);
background-color: #87deff;
}
.blue {
/* styling for the right part */
height: 46px;
width: 151px;
float: left;
text-align: center;
/* border radius */
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
/* backgorund */
background: -webkit-gradient(linear, left top, left bottom, from(#87deff), to(#40a9fd));
background: -moz-linear-gradient(#87deff, #40a9fd);
background-color: #40a9fd;
/* shadows and highlights */
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
border: 1px solid #008af5;
border-left: 0;
}
.dropbutton:hover .blue {
background: -webkit-gradient(linear, left top, left bottom, from(#b1eaff), to(#68bcff));
background: -moz-linear-gradient(#b1eaff, #68bcff);
background-color: #68bcff;
}
.dropbutton:active .blue {
background: -webkit-gradient(linear, left top, left bottom, from(#68bcff), to(#87deff));
background: -moz-linear-gradient(#68bcff, #87deff);
background-color: #87deff;
}
.blue a {
/* link styling */
color: #fbfbfb;
font: bold 16px/32px arial, helvetica, sans-serif;
text-decoration: none;
text-shadow: 0 1px 0 #008af5;
}
/* ====================================
====== DARK STYLE (DROPDOWN) =======
====================================
================================================== */
.dark {
width: 120px;
height: 31px;
padding: 7px 6px;
margin-left: 58px;
position: absolute;
clear: both;
z-index: -1;
-webkit-transition: top .6s linear;
/* text */
color: #fbfbfb;
font: bold 12px/15px arial, helvetica, sans-serif;
text-decoration: none;
text-shadow: 0 1px 0 #000;
/* border radius */
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
/* backgorund */
background: -webkit-gradient(linear, left top, left bottom, from(#2b2b2b), color-stop(.1, #5c5c5c), to(#838383));
background: -moz-linear-gradient(#2b2b2b, #5c5c5c 10%, #838383);
background-color: #ccc;
/* shadows and highlights */
-webkit-box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.5) inset;
box-shadow: 0 1px -1px rgba(255, 255, 255, 0.4) inset;
/* border */
border: 1px solid #000;
border-top: 0;
}
.dropbutton:hover .dark { top: 48px }
.dark img { float: left }
.dark span {
color: #e5e5e5;
font-weight: normal;
}
</style>
- HTML :
<div class="blue">
<img src="http://iwantaneff.in/t/arrow.png" />
</div>
<div class="green">
<a href="#">Download now!</a>
</div>
<div class="dark">
<img src="http://iwantaneff.in/t/file.png" />
Version 3.0 <br />
<span>255 MB</span>
</div>
</div>
== Style 2 ==
- CSS :
.dropbutton {
/* main class */
height: 48px;
width: 200px;
font: bold 16px/48px arial;
margin-bottom: 60px;
position: relative;
}
/* ===============================
========= BLACK STYLE =========
===============================
================================================== */
.black:first-child {
/* styling for the left part */
padding: 7px;
float: left;
width: 32px;
height: 32px;
/* border radius */
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
/* backgorund */
background: -webkit-gradient(linear, left top, left bottom, from(#818181), to(#242424));
background: -moz-linear-gradient(#818181, #242424);
background-color: #222;
/* shadows and highlights */
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
border: 1px solid #000;
}
.dropbutton:hover .black:first-child {
background: -webkit-gradient(linear, left top, left bottom, from(#a2a2a2), to(#3d3d3d));
background: -moz-linear-gradient(#a2a2a2, #3d3d3d);
background-color: #555;
}
.dropbutton:active .black:first-child {
background: -webkit-gradient(linear, left top, left bottom, from(#3d3d3d), to(#818181));
background: -moz-linear-gradient(#3d3d3d, #818181);
background-color: #777;
}
.black {
/* styling for the right part */
height: 46px;
width: 151px;
float: left;
text-align: center;
/* border radius */
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
/* backgorund */
background: -webkit-gradient(linear, left top, left bottom, from(#818181), to(#242424));
background: -moz-linear-gradient(#818181, #242424);
background-color: #222;
/* shadows and highlights */
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
border: 1px solid #000;
border-left: 0;
}
.dropbutton:hover .black {
background: -webkit-gradient(linear, left top, left bottom, from(#a2a2a2), to(#3d3d3d));
background: -moz-linear-gradient(#a2a2a2, #3d3d3d);
background-color: #555;
}
.dropbutton:active .black {
background: -webkit-gradient(linear, left top, left bottom, from(#3d3d3d), to(#818181));
background: -moz-linear-gradient(#3d3d3d, #818181);
background-color: #777;
}
.black a {
/* link styling */
color: #fbfbfb;
font: bold 16px/32px arial, helvetica, sans-serif;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
/* ====================================
====== LIGHT STYLE (DROPDOWN) ======
====================================
================================================== */
.light {
width: 120px;
height: 31px;
padding: 7px 6px;
margin-left: 58px;
position: absolute;
clear: both;
z-index: -1;
-webkit-transition: top .6s linear;
/* text */
color: #333;
font: bold 12px/15px arial, helvetica, sans-serif;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
/* border radius */
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
/* backgorund */
background: -webkit-gradient(linear, left top, left bottom, from(#bababa), color-stop(.1, #e4e4e4), to(#f2f2f2));
background: -moz-linear-gradient(#bababa, #e4e4e4 10%, #f2f2f2);
background-color: #ccc;
/* shadows and highlights */
-webkit-box-shadow: 0 1px -1px rgba(255, 255, 255, 1) inset;
-moz-box-shadow: 0 -1px 1px rgba(255, 255, 255, 1) inset;
box-shadow: 0 1px -1px rgba(255, 255, 255, 0.8) inset;
/* border */
border: 1px solid #bbb;
border-top: 0;
}
.dropbutton:hover .light { top: 48px }
.light img { float: left }
.light span {
color: #555;
font-weight: normal;
}
-HTML :
<div class="dropbutton">
<div class="black">
<img src="http://iwantaneff.in/t/arrow.png" />
</div>
<div class="orange">
<a href="#">Download now!</a>
</div>
<div class="light">
<img src="http://iwantaneff.in/t/box.png" />
ZIP File <br />
<span>25 KB</span>
</div>
</div>
== Style 3 ==
- CSS :
.dropbutton {
/* main class */
height: 48px;
width: 200px;
font: bold 16px/48px arial;
margin-bottom: 60px;
position: relative;
}
/* ===============================
======== PURPLE STYLE =========
===============================
================================================== */
.purple:first-child {
/* styling for the left part */
padding: 7px;
float: left;
width: 32px;
height: 32px;
/* border radius */
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
/* backgorund */
background: -webkit-gradient(linear, left top, left bottom, from(#cba7f5), to(#9b45f4));
background: -moz-linear-gradient(#cba7f5, #9b45f4);
background-color: #9b45f4;
/* shadows and highlights */
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
border: 1px solid #6a14c3;
}
.dropbutton:hover .purple:first-child {
background: -webkit-gradient(linear, left top, left bottom, from(#dcbefe), to(#a75ff2));
background: -moz-linear-gradient(#dcbefe, #a75ff2);
background-color: #a75ff2;
}
.dropbutton:active .purple:first-child {
background: -webkit-gradient(linear, left top, left bottom, from(#b97afc), to(#cba7f5));
background: -moz-linear-gradient(#b97afc, #cba7f5);
background-color: #cba7f5;
}
.purple {
/* styling for the right part */
height: 46px;
width: 151px;
float: left;
text-align: center;
/* border radius */
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
/* backgorund */
background: -webkit-gradient(linear, left top, left bottom, from(#cba7f5), to(#9b45f4));
background: -moz-linear-gradient(#cba7f5, #9b45f4);
background-color: #9b45f4;
/* shadows and highlights */
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
border: 1px solid #6a14c3;
border-left: 0;
}
.dropbutton:hover .purple {
background: -webkit-gradient(linear, left top, left bottom, from(#dcbefe), to(#a75ff2));
background: -moz-linear-gradient(#dcbefe, #a75ff2);
background-color: #a75ff2;
}
.dropbutton:active .purple {
background: -webkit-gradient(linear, left top, left bottom, from(#b97afc), to(#cba7f5));
background: -moz-linear-gradient(#b97afc, #cba7f5);
background-color: #cba7f5;
}
.purple a {
/* link styling */
color: #fbfbfb;
font: bold 16px/32px arial, helvetica, sans-serif;
text-decoration: none;
text-shadow: 0 1px 0 #6a14c3;
}
/* ====================================
====== DARK STYLE (DROPDOWN) =======
====================================
================================================== */
.dark {
width: 120px;
height: 31px;
padding: 7px 6px;
margin-left: 58px;
position: absolute;
clear: both;
z-index: -1;
-webkit-transition: top .6s linear;
/* text */
color: #fbfbfb;
font: bold 12px/15px arial, helvetica, sans-serif;
text-decoration: none;
text-shadow: 0 1px 0 #000;
/* border radius */
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
/* backgorund */
background: -webkit-gradient(linear, left top, left bottom, from(#2b2b2b), color-stop(.1, #5c5c5c), to(#838383));
background: -moz-linear-gradient(#2b2b2b, #5c5c5c 10%, #838383);
background-color: #ccc;
/* shadows and highlights */
-webkit-box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.5) inset;
box-shadow: 0 1px -1px rgba(255, 255, 255, 0.4) inset;
/* border */
border: 1px solid #000;
border-top: 0;
}
.dropbutton:hover .dark { top: 48px }
.dark img { float: left }
.dark span {
color: #e5e5e5;
font-weight: normal;
}
- HTML :
<div class="dropbutton">
<div class="purple">
<img src="http://iwantaneff.in/t/arrow_black.png" />
</div>
<div class="yellow">
<a href="#">Try it now!</a>
</div>
<div class="dark">
<img src="http://iwantaneff.in/t/file_red.png" />
FREE TRIAL <br />
<span>30 days</span>
</div>
</div>
== Style 4 ==
- CSS :
.dropbutton {
/* main class */
height: 48px;
width: 200px;
font: bold 16px/48px arial;
margin-bottom: 60px;
position: relative;
}
/* ===============================
========= GREY STYLE ==========
===============================
================================================== */
.grey:first-child {
/* styling for the left part */
padding: 7px;
float: left;
width: 32px;
height: 32px;
/* border radius */
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
/* backgorund */
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#c6c6c6));
background: -moz-linear-gradient(#fbfbfb, #c6c6c6);
background-color: #ccc;
/* shadows and highlights */
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
border: 1px solid #bbb;
}
.dropbutton:hover .grey:first-child {
background: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#d5d5d5));
background: -moz-linear-gradient(#fdfdfd, #d5d5d5);
background-color: #ddd;
}
.dropbutton:active .grey:first-child {
background: -webkit-gradient(linear, left top, left bottom, from(#d5d5d5), to(#fafafa));
background: -moz-linear-gradient(#d5d5d5, #fafafa);
background-color: #fbfbfb;
}
.grey {
/* styling for the right part */
height: 46px;
width: 151px;
float: left;
text-align: center;
/* border radius */
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
/* backgorund */
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#c6c6c6));
background: -moz-linear-gradient(#fbfbfb, #c6c6c6);
background-color: #ccc;
/* shadows and highlights */
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
border: 1px solid #bbb;
border-left: 0;
}
.dropbutton:hover .grey {
background: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#d5d5d5));
background: -moz-linear-gradient(#fdfdfd, #d5d5d5);
background-color: #ddd;
}
.dropbutton:active .grey {
background: -webkit-gradient(linear, left top, left bottom, from(#d5d5d5), to(#fafafa));
background: -moz-linear-gradient(#d5d5d5, #fafafa);
background-color: #fbfbfb;
}
.grey a {
/* link styling */
color: #333;
font: bold 16px/32px arial, helvetica, sans-serif;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
}
/* ====================================
====== LIGHT STYLE (DROPDOWN) ======
====================================
================================================== */
.light {
width: 120px;
height: 31px;
padding: 7px 6px;
margin-left: 58px;
position: absolute;
clear: both;
z-index: -1;
-webkit-transition: top .6s linear;
/* text */
color: #333;
font: bold 12px/15px arial, helvetica, sans-serif;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
/* border radius */
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
/* backgorund */
background: -webkit-gradient(linear, left top, left bottom, from(#bababa), color-stop(.1, #e4e4e4), to(#f2f2f2));
background: -moz-linear-gradient(#bababa, #e4e4e4 10%, #f2f2f2);
background-color: #ccc;
/* shadows and highlights */
-webkit-box-shadow: 0 1px -1px rgba(255, 255, 255, 1) inset;
-moz-box-shadow: 0 -1px 1px rgba(255, 255, 255, 1) inset;
box-shadow: 0 1px -1px rgba(255, 255, 255, 0.8) inset;
/* border */
border: 1px solid #bbb;
border-top: 0;
}
.dropbutton:hover .light { top: 48px }
.light img { float: left }
.light span {
color: #555;
font-weight: normal;
}
- HTML :
<div class="dropbutton">
<div class="grey">
<img src="http://iwantaneff.in/t/arrow.png" />
</div>
<div class="grey">
<a href="#">Download now!</a>
</div>
<div class="light">
<img src="http://iwantaneff.in/t/file_blue.png" />
Updated!<br />
<span>version 2.3.1</span>
</div>
</div>
== Style 5 ==
- CSS :
.dropbutton {
/* main class */
height: 48px;
width: 200px;
font: bold 16px/48px arial;
margin-bottom: 60px;
position: relative;
}
/* ===============================
========== RED STYLE ==========
===============================
================================================== */
.red:first-child {
/* styling for the left part */
padding: 7px;
float: left;
width: 32px;
height: 32px;
/* border radius */
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
/* backgorund */
background: -webkit-gradient(linear, left top, left bottom, from(#ff9782), to(#d83c22));
background: -moz-linear-gradient(#ff9782, #d83c22);
background-color: #d83c22;
/* shadows and highlights */
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
border: 1px solid #c93f27;
}
.dropbutton:hover .red:first-child {
background: -webkit-gradient(linear, left top, left bottom, from(#ffbdb0), to(#ee6048));
background: -moz-linear-gradient(#ffbdb0, #ee6048);
background-color: #ee6048;
}
.dropbutton:active .red:first-child {
background: -webkit-gradient(linear, left top, left bottom, from(#e75138), to(#ff7053));
background: -moz-linear-gradient(#e75138, #ff7053);
background-color: #ff9782;
}
.red {
/* styling for the right part */
height: 46px;
width: 151px;
float: left;
text-align: center;
/* border radius */
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
/* backgorund */
background: -webkit-gradient(linear, left top, left bottom, from(#ff9782), to(#d83c22));
background: -moz-linear-gradient(#ff9782, #d83c22);
background-color: #d83c22;
/* shadows and highlights */
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
border: 1px solid #c93f27;
border-left: 0;
}
.dropbutton:hover .red {
background: -webkit-gradient(linear, left top, left bottom, from(#ffbdb0), to(#ee6048));
background: -moz-linear-gradient(#ffbdb0, #ee6048);
background-color: #ee6048;
}
.dropbutton:active .red {
background: -webkit-gradient(linear, left top, left bottom, from(#e75138), to(#ff7053));
background: -moz-linear-gradient(#e75138, #ff7053);
background-color: #ff9782;
}
.red a {
/* link styling */
color: #fbfbfb;
font: bold 16px/32px arial, helvetica, sans-serif;
text-decoration: none;
text-shadow: 0 1px 0 #c93f27;
}
/* ====================================
====== LIGHT STYLE (DROPDOWN) ======
====================================
================================================== */
.light {
width: 120px;
height: 31px;
padding: 7px 6px;
margin-left: 58px;
position: absolute;
clear: both;
z-index: -1;
-webkit-transition: top .6s linear;
/* text */
color: #333;
font: bold 12px/15px arial, helvetica, sans-serif;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
/* border radius */
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
/* backgorund */
background: -webkit-gradient(linear, left top, left bottom, from(#bababa), color-stop(.1, #e4e4e4), to(#f2f2f2));
background: -moz-linear-gradient(#bababa, #e4e4e4 10%, #f2f2f2);
background-color: #ccc;
/* shadows and highlights */
-webkit-box-shadow: 0 1px -1px rgba(255, 255, 255, 1) inset;
-moz-box-shadow: 0 -1px 1px rgba(255, 255, 255, 1) inset;
box-shadow: 0 1px -1px rgba(255, 255, 255, 0.8) inset;
/* border */
border: 1px solid #bbb;
border-top: 0;
}
.dropbutton:hover .light { top: 48px }
.light img { float: left }
.light span {
color: #555;
font-weight: normal;
}
- HTML :
<div class="dropbutton">
<div class="red">
<img src="http://iwantaneff.in/t/arrow_black.png" />
</div>
<div class="blue">
<a href="#">Buy it now!</a>
</div>
<div class="light">
<img src="http://iwantaneff.in/t/box.png" />
Special Offer <br />
<span>25,99$</span>
</div>
</div>
Ket .
Sobat Tinggal Memilih Style Mana , dan Tinggal Menambahkan Link ! Mudahkan Kalo Sobat Kurang Ngerti Bertanyalah Agar Mengerti ! ^_^ Terima Kasih .
No comments:
Post a Comment