5 Style Download Buttons Dengan CSS

CSS Download Buttons

Demo

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

Ket .
Sobat Tinggal Memilih Style Mana , dan Tinggal Menambahkan Link ! Mudahkan Kalo Sobat Kurang Ngerti Bertanyalah Agar Mengerti ! ^_^ Terima Kasih .

Ring Menu Dengan CSS

Mau Tau Ring Menu Itu Kayak Gimana ?? Banya Selengkapnya Woke ^_^

Contoh Ring Menu :

• main
• top
• right
• bottom
• left

Udah Liatkan Contoh Ring Menu'nya ?? .. Kalo Udah Yok Liat Scriptnya :D

CSSnya :

html, body {
height: 100%;
}
ul , li {
  margin: 0;
  padding: 0;
}
.ringMenu {
  width: 100px;
  margin: 150px auto;
}
.ringMenu:hover {}
.ringMenu ul {
  list-style: none;
  position: relative;
  width: 100px;
  color: white;
}
.ringMenu ul a {
  color: white;
}
.ringMenu ul li {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.ringMenu ul li a {
  display: block;
  width: 100px;
  height: 100px;
  background: rgba(50,50,50,0.7);
  text-align: center;
  line-height: 100px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}
.ringMenu ul li a:hover {
  background: rgba(230,150,20,0.7);
}
.ringMenu ul li:not(.main) {
  -webkit-transform: rotate(-180deg) scale(0);
  -moz-transform: rotate(-180deg) scale(0);
  -o-transform: rotate(-180deg) scale(0);
  transform: rotate(-180deg) scale(0);
  opacity: 0;
}
.ringMenu:hover ul li {
  -webkit-transform: rotate(0) scale(1);
  -moz-transform: rotate(0) scale(1);
  -o-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
  opacity: 1;
}
.ringMenu ul li.top {
  -webkit-transform-origin: 50% 152px;
  -moz-transform-origin: 50% 152px;
  -o-transform-origin: 50% 152px;
  transform-origin: 50% 152px;
  position: absolute;
  top: -102px;
  left: 0;
}
.ringMenu ul li.bottom {
  -webkit-transform-origin: 50% -52px;
  -moz-transform-origin: 50% -52px;
  -o-transform-origin: 50% -52px;
  transform-origin: 50% -52px;
  position: absolute;
  bottom: -102px;
  left: 0;
}
.ringMenu ul li.right {
  -webkit-transform-origin: -52px 50%;
  -moz-transform-origin: -52px 50%;
  -o-transform-origin: -52px 50%;
  transform-origin: -52px 50%;
  position: absolute;
  top: 0px;
  right: -102px;
}
.ringMenu ul li.left {
  -webkit-transform-origin: 152px 50%;
  -moz-transform-origin: 152px 50%;
  -o-transform-origin: 152px 50%;
  transform-origin: 152px 50%;
  position: absolute;
  top: 0;
  left: -102px;
}

 Dan Yang Ini Kode HTMLnya Atau Bisa Dibilang Script Pemanggil CSSnya :

<div class="ringMenu">
<ul>
<li class="main"><a href="http://www.blogger.com/blogger.g?blogID=2996732288214607132#main">main</a></li>
<li class="top"><a href="http://www.blogger.com/blogger.g?blogID=2996732288214607132#top">top</a></li>
<li class="right"><a href="http://www.blogger.com/blogger.g?blogID=2996732288214607132#right">right</a></li>
<li class="bottom"><a href="http://www.blogger.com/blogger.g?blogID=2996732288214607132#bottom">bottom</a></li>
<li class="left"><a href="http://www.blogger.com/blogger.g?blogID=2996732288214607132#left">left</a></li>
</ul>
</div>

Simple Bukan ?? ^_^ ,, Ahahahaha Gampang Sekali Ya :D ... Buat Sobat Ada Yang Tidak Di Mengerti Gk ??? Kalo Ada Silahkan Bertanya :D ,,, Gunakanlah Kotak Komentar Untuk Bertanya Atau Mengomentari Artikel Ini :D ,, Karna Memang Itulah Gunanya Kotak Komentar :D.

Tooltip V-2 Dengan CSS

Tooltip V-2 Dengan  CSS

CSS :

a { position: relative; cursor: pointer; font: normal normal 85% sans-serif; color: white; text-shadow: #FFF 0 -1px; display: inline-block;
}
a > i { text-align: center; font: italic normal 90% Georgia, serif; line-height: 150%; color: black; text-shadow: white 0 1px; background: #DDD; background-clip: padding-box; box-shadow: 0 0px 2px rgba(0, 0, 0, 0.5); border: 5px solid #111; border: 5px solid rgba(0, 0, 0, 0.5); border-radius: 3px; position: absolute; width: 250px; left: 110%; margin-left:5px; padding: 10px 0;  bottom:0%; margin-bottom: -25px; visibility:hidden; opacity:0; -webkit-transition: opacity 0.5s linear; -moz-transition: opacity 0.5s linear; -ms-transition: opacity 0.5s linear; -o-transition: opacity 0.5s linear; transition: opacity 0.5s linear;}
a > i:before, a > i:after { content: ""; position: absolute;
border-bottom: 10px solid transparent; border-right:10px solid transparent; top: 50%; left: 0%; margin-left: -10px;}
a > i:before { border-top: 13px solid #111; border-bottom: 13px solid #111; 
border-right:9px solid #111; border-top: 10px solid transparent; border-left: 10px solid transparent; border-bottom:10px solid transparent;
margin-left: -22px; z-index: 1;
}
a > i:after{
border-top: 10px solid #DDD; border-bottom: 10px solid #DDD; 
border-right:10px solid #DDD; border-top: 10px solid transparent; border-left: 10px solid transparent; border-bottom:10px solid transparent;
margin-left: -18px; z-index: 1;}
a:hover > i { visibility: visible; opacity: 1;}

HTML :

<a><a href="#">Hover Me! <i>Ini Contoh Tooltip Versi2<br />Yang Menggunakan Script CSS<br />Dengan Arah Panah Ke Kiri</i></a>

Ket. 
  Sesuaikan Text Sadow dan Colour Textnya Dengan Background Blog Sobat Supaya Warna Tulisannya Tidak Menyatu Dengan Warna Background Blog Sobat

Example :

Hover Me! Ini Contoh Tooltip Versi2
Yang Menggunakan Script CSS
Dengan Arah Panah Ke Kiri

Pure 24 Icon Dengan CSS

Pure 24 Icon Dengan CSS

Contoh :

---

CSS :

a.icon {
margin: 12px;
    background-color: #fed;
    border: 2px solid #fc6;
    display: inline-block;
    position: relative;
    vertical-align: top;
}
a.icon:after,
a.icon:before {
    background: #fed;
    border: 2px solid #fc6;
    content: '';
    position: absolute;
}
a.icon:hover,
a.icon:hover:after,
a.icon:hover:before {
    background-color: #ffe;
}
/* New Document Icon */
a.newDoc {
    border-top: 2px solid #fc6;
    box-shadow: inset 0 0 0 2px #fed;
    height: 15px;
    top: 10px;
    width: 20px;
}
a.newDoc:hover {
    box-shadow: inset 0 0 0 2px #ffe;
}
a.newDoc:after {
    height: 10px;
    right: 1px;
    top: -9px;
    width: 10px;
    z-index: -1;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
a.newDoc:before {
    border-bottom: none;
    border-right: 2px solid #fc6;
    height: 10px;
    left: -2px;
    top: -12px;
    width: 11px;
}
/* Previous Icon */
a.prev {
    border-radius: 100%;
    height: 26px;
    width: 26px;
}
a.prev:after,
a.prev:before {
    border-radius: 2px;
    height: 0;
    left: 5px;
    width: 9px;
}
a.prev:after {
    bottom: 8px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
a.prev:before {
    top: 8px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
/* Next Icon */
a.next {
    border-radius: 100%;
    height: 26px;
    width: 26px;
}
a.next:after,
a.next:before {
    border-radius: 2px;
    height: 0;
    right: 5px;
    width: 9px;
}
a.next:after {
    top: 8px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
a.next:before {
    bottom: 8px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
/* Mail Icon */
a.mail {
    height: 20px;
    top: 4px;
    width: 28px;
}
a.mail:after,
a.mail:before {
    border-top: none;
    top: 6px;
    width: 13px;
}
a.mail:after {
    left: -2px;
    -webkit-transform: rotate(25deg);
       -moz-transform: rotate(25deg);
        -ms-transform: rotate(25deg);
         -o-transform: rotate(25deg);
            transform: rotate(25deg);
}
a.mail:before {
    right: -2px;
    -webkit-transform: rotate(-25deg);
       -moz-transform: rotate(-25deg);
        -ms-transform: rotate(-25deg);
         -o-transform: rotate(-25deg);
            transform: rotate(-25deg);
}
/* Contacts Icon */
a.contacts {
    border-left-width: 6px;
    color: #fc6;
    font: bold 12px/1 sans-serif;
    height: 25px;
    text-decoration: none;
    width: 18px;
}
a.contacts:after,
a.contacts:before {
    border: none;
}
a.contacts:after {
    content: '@';
    right: 3px;
    top: 5px;
}
/* Chart Icon */
a.chart {
    height: 20px;
    margin-right: 30px;
    top:5px;
    width: 4px;
}
a.chart:after,
a.chart:before {
    bottom: -2px;
    width: 4px;
}
a.chart:after {
    height: 25px;
    left: 8px;
}
a.chart:before {
    height: 15px;
    left: 18px;
}
/* Clock Icon */
a.clock {
    border-radius: 100%;
    height: 26px;
    width: 26px;
}
a.clock:after,
a.clock:before {
    border-left: none;
    width: 0;
}
a.clock:after {
    height: 9px;
    left: 12px;
    top: 3px;
}
a.clock:before {
    height: 4px;
    left: 15px;
    top: 8px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
/* Calendar Icon */
a.calendar {
    height: 23px;
    top: 2px;
    width: 27px;
}
a.calendar:after {
    bottom: 19px;
    left: -2px;
    right: -2px;
    top: -2px;
}
a.calendar:before {
    background: none;
    border-bottom: none;
    border-top: none;
    border-width: 4px;
    bottom: 23px;
    left: 2px;
    right: 2px;
    top: -4px;
}
a.calendar:hover:before {
    background: none;
}
/* Folder Icon */
a.folder {
    height: 18px;
    top: 6px;
    width: 27px;
}
a.folder:after {
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    height: 3px;
    left: 1px;
    top: -5px;
    width: 10px;
}
a.folder:before {
    border: none;
}
/* Add Icon */
a.add {
    border-radius: 100%;
    height: 26px;
    width: 26px;
}
a.add:after {
    height: 16px;
    left: 11px;
    top: 3px;
    width: 0;
}
a.add:before {
    height: 0;
    left: 3px;
    top: 11px;
    width: 16px;
}
/* Subtract Icon */
a.subtract {
    border-radius: 100%;
    height: 26px;
    width: 26px;
}
a.subtract:after {
    height: 0;
    left: 3px;
    top: 11px;
    width: 16px;
}
a.subtract:before {
    border: none;
}
/* Full Battery Icon */
a.batFull {
    height: 22px;
    margin-left: 18px;
    margin-right: 18px;
    top: 3px;
    width: 8px;
}
a.batFull:after {
    bottom: 2px;
    left: 2px;
    right: 2px;
    top: 2px;
}
a.batFull:before {
    height: 0;
    left: 1px;
    right: 1px;
    top: -4px;
}
/* Empty Battery Icon */
a.batEmpty {
    height: 22px;
    margin-left: 18px;
    margin-right: 18px;
    top: 3px;
    width: 8px;
}
a.batEmpty:after {
    bottom: 2px;
    left: 2px;
    right: 2px;
    top: 16px;
}
a.batEmpty:before {
    height: 0;
    left: 1px;
    right: 1px;
    top: -4px;
}
/* Tick Icon */
a.tick {
    border-radius: 100%;
    height: 26px;
    width: 26px;
}
a.tick:after {
    height: 14px;
    left: 13px;
    top: 5px;
    width: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
 
}
a.tick:before {
    height: 0;
    left: 4px;
    top: 14px;
    width: 2px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
/* Cross Icon */
a.cross {
    border-radius: 100%;
    height: 26px;
    width: 26px;
}
a.cross:after {
    height: 0;
    left: 3px;
    top: 11px;
    width: 16px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
a.cross:before {
    height: 0;
    left: 3px;
    top: 11px;
    width: 16px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
/* Eject Icon */
a.eject {
    height: 4px;
    top: 20px;
    width: 26px;
}
a.eject:after,
a.eject:before,
a.eject:hover:after,
a.eject:hover:before {
    background: none;
}
a.eject:after {
    border-bottom: 15px solid #fc6;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid transparent;
    height: 0;
    left: -2px;
    top: -35px;
    width: 0;
}
a.eject:before {
    border-bottom: 10px solid #fed;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid transparent;
    height: 0;
    left: 3px;
    top: -27px;
    width: 0;
    z-index: 1;
}
a.eject:hover:before {
    border-bottom-color: #ffe;
}
/* User Icon */
a.user {
    border-radius: 10px 10px 0 0;
    height: 6px;
    top: 19px;
    width: 26px;
}
a.user:after {
    border-radius: 10px;
    height: 17px;
    left: 4px;
    top: -20px;
    width: 14px;
}
a.user:before {
    border: none;
    height: 10px;
    left: 9px;
    top: -9px;
    width: 8px;
    z-index: 1;
}
/* Heart Icon */
a.heart {
    border-radius: 100%;
    height: 15px;
    margin-right: 24px;
    width: 15px;
}
a.heart:after {
    border-radius: 100%;
    height: 15px;
    left: 11px;
    top: -2px;
    width: 15px;
    z-index: -1;
}
a.heart:before {
    border-left: none;
    border-top: none;
    height: 16px;
    left: 5px;
    top: 6px;
    width: 16px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

/* Play Icon */
a.play {
    border-radius: 100%;
    height: 26px;
    width: 26px;
}
a.play:after,
a.play:before,
a.play:hover:after,
a.play:hover:before {
    background: none;
}
a.play:after {
    border-bottom: 8px solid transparent;
    border-left: 13px solid #fc6;
    border-right: 13px solid transparent;
    border-top: 8px solid transparent;
    height: 0;
    left: 8px;
    top: 5px;
    width: 0;
}
a.play:before {
    border: none;
}
/* Pause Icon */
a.pause {
    border-radius: 100%;
    height: 26px;
    width: 26px;
}
a.pause:after,
a.pause:before {
    height: 10px;
    top: 6px;
    width: 0;
}
a.pause:after {
    left: 7px;
}
a.pause:before {
    left: 15px;
}
/* Stop Icon */
a.stop {
    border-radius: 100%;
    height: 26px;
    width: 26px;
}
a.stop:after {
    background: #fc6;
    height: 9px;
    left: 7px;
    top: 7px;
    width: 8px;
}
a.stop:hover:after {
    background: #fc6;
}
a.stop:before {
    border: none;
}
/* Flag Icon */
a.flag {
    height: 25px;
    margin-right: 35px;
    width: 0;
}
a.flag:after,
a.flag:before {
    height: 8px;
    left: 0;
    top: -2px;
    width: 10px;
}
a.flag:before {
    left: 6px;
    top: 2px;
}
/* Home Icon */
a.home {
    height: 10px;
    top: 14px;
    width: 20px;
}
a.home:after,
a.home:before,
a.home:hover:after,
a.home:hover:before {
    background: none;
}
a.home:after {
    border-bottom: 15px solid #fc6;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 15px solid transparent;
    height: 0;
    left: -6px;
    top: -29px;
    width: 0;
}
a.home:before {
    border-bottom: 10px solid #fed;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 10px solid transparent;
    height: 0;
    left: -1px;
    top: -21px;
    width: 0;
    z-index: 1;
}
a.home:hover:before {
    border-bottom-color: #ffe;
}
/* Comment Icon */
a.comment {
    border-radius: 4px;
    height: 18px;
    width: 26px;
}
a.comment:after,
a.comment:before {
    background: none;
    border-bottom: 6px solid transparent;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #fc6;
    bottom: -14px;
    height: 0;
    left: 7px;
    width: 0;
}
a.comment:before {
    border-top-color: #fed;
    bottom: -11px;
    z-index: 1;
}
a.comment:hover:after {
    background: none;
}
a.comment:hover:before {
    background: none;
    border-top-color: #ffe;
}

HTML Kode :



1.  <a class="folder icon" title="Folder" href="#"></a>
2.  <a class="newDoc icon" title="New Document" href="#"></a>
3.  <a class="mail icon" title="Mail" href="#"></a>
4.  <a class="contacts icon" title="Contacts" href="#"></a>
5.  <a class="calendar icon" title="Calendar" href="#"></a>
6.  <a class="clock icon" title="Clock" href="#"></a>
7.  <a class="chart icon" title="Chart" href="#"></a>
8.  <a class="prev icon" title="Previous" href="#"></a>
9.  <a class="next icon" title="Next" href="#"></a>
10. <a class="flag icon" title="Flag" href="#"></a>
11. <a class="add icon" title="Add" href="#"></a>
12. <a class="subtract icon" title="Subtract" href="#"></a>
13. <a class="tick icon" title="Tick" href="#"></a>
14. <a class="cross icon" title="Cross" href="#"></a>
15. <a class="user icon" title="User" href="#"></a>
16. <a class="comment icon" title="Comment" href="#"></a>
17. <a class="heart icon" title="Heart" href="#"></a>
18. <a class="home icon" title="Home" href="#"></a>
19. <a class="batFull icon" title="Full Battery" href="#"></a>
20. <a class="batEmpty icon" title="Empty Battery" href="#"></a>
21. <a class="play icon" title="Play" href="#"></a>
22. <a class="pause icon" title="Pause" href="#"></a>
23. <a class="stop icon" title="Stop" href="#"></a>
24. <a class="eject icon" title="Eject" href="#"></a>



NB.
  Jika Sobat Ingin Memilih Salah Satu Iconnya Misalkan Sobat Ingin Icon Yang Pertama Di Kode HTML Yang No.1 Itu Adalah <a class="folder icon" Bagaimana Cara Mengambilnya ?? Sobat Tinggal Search "folder icon" Maka Kode Keseluruhan Yang Dicari Akan Terlihat Seperti :


/* Folder Icon */
a.folder {
    height: 18px;
    top: 6px;
    width: 27px;
}
a.folder:after {
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    height: 3px;
    left: 1px;
    top: -5px;
    width: 10px;
}
a.folder:before {
    border: none;
}


Dan Itulah Kode Dari Icon Pertama ,, Bagaimana Cara Memasangnya ?? Sobat Copas Kode CSS Icon Yang Tadi Lalu Ditambahkan Di Awal <style> dan di Akhir </style> , Contoh :


<style>


................
................
Kode Yang Tadi
................
................


</style>


Maka Bila Aslinya Akan Terlihat Sperti :


<style>
/* Folder Icon */
a.folder {
    height: 18px;
    top: 6px;
    width: 27px;
}
a.folder:after {
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    height: 3px;
    left: 1px;
    top: -5px;
    width: 10px;
}
a.folder:before {
    border: none;
}
</style>

Sekian Dari Saya, Selamat Mencoba ^_^

Tooltip Dengan CSS

Tooltip Dengan CSS

CSS Kode :

.tooltip {
    display: inline;
    position: relative;
}
.tooltip:hover {
    color: #c00;
    text-decoration: none;
}
.tooltip:hover:after {
background: -moz-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(51,51,51,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.7)), color-stop(100%,rgba(51,51,51,1)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(51,51,51,1) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(51,51,51,1) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(51,51,51,1) 100%);
background: linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(51,51,51,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#333333',GradientType=0 );  
box-shadow: 0px 0px 0px 1px rgba(0,0,0,1), inset 0px 1px 0px 0px rgba(255,255,255,.3);
border-radius: 3px;
    bottom: 2.35em;
    color: #fff;
    content: attr(title);
font-size: 12px;
    display: block;
    left: 1em;
    padding: 8px 20px;
    position: absolute;
    text-shadow: 0 1px 0 #000;
    white-space: nowrap;
    z-index: 98;
}
.tooltip:hover:before {
width: 10px;
height: 10px;
background: rgba(51,51,51,1);
-webkit-transform: rotate(45deg);
box-shadow: 1px 1px 0px 0px rgba(0,0,0,1);
    bottom: 1.5em;
    content: "";
    display: block;
    left: 2em;
    position: absolute;
    z-index: 99;
}
a.tooltip:link{
color:#5896c6;
text-decoration:none;
}
a.tooltip:visited{
color:#5896c6;
text-decoration:none;
}
a.tooltip:hover{
color:#5896c6;
text-decoration:none;
}
p{
font-family: Helvetica, arial, sans-serif;
color:#646464;
line-height:1.5;
display: block;
width: 140px;
margin: 100px auto;
}

HTML Kode : 

<p>Example: <a href="#" class="tooltip" title="Beautiful tooltip">Hover Me</a></p>

Contoh : 

Example: Hover Me