Rabu, 22 Mei 2013

5 Style Download Buttons Dengan CSS



== 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="dropbutton">
    <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>

Tidak ada komentar:

Posting Komentar