Skip to main content

Add Cool and Colorful CSS 3D Buttons for Blogger, Wordpress and Websites

Guyz in this Tutorial I am Going to provide you colorful 3D buttons.




 CSS CODES

FOR BLUE BUTTON
/****************************************************
 *  Push Button Blue
 *****************************************************/
.push_button_blue{
 position:relative;
 width:100px;
 color:#FFF;
 display:block;
 text-decoration:none;
 margin:0 auto;
 border-radius:5px;
 border:solid 1px #5877B8;
 background:#3E5C9A;
 text-align:center;
 padding:20px 30px;
 
 -webkit-transition: all 0.1s;
 -moz-transition: all 0.1s;
 transition: all 0.1s;
 
 -webkit-box-shadow: 0px 9px 0px #224285;
        -moz-box-shadow: 0px 9px 0px #224285;
        box-shadow: 0px 9px 0px #224285;
}
.push_button_blue:active{
    -webkit-box-shadow: 0px 2px 0px #224285;
    -moz-box-shadow: 0px 2px 0px #224285;
    box-shadow: 0px 2px 0px #224285;
    position:relative;
    top:7px;
}

 FOR MAROON
/****************************************************
 *  Push Button Maroon
 *****************************************************/
.push_button_maroon{
 position:relative;
 width:200px;
 color:#FFF;
 display:block;
 text-decoration:none;
 margin:0 auto;
 border-radius:5px;
 border:solid 1px #D94E3B;
 background:#cb3b27;
 text-align:center;
 padding:20px 30px;
 
 -webkit-transition: all 0.1s;
 -moz-transition: all 0.1s;
 transition: all 0.1s;
 
 -webkit-box-shadow: 0px 9px 0px #84261a;
        -moz-box-shadow: 0px 9px 0px #84261a;
        box-shadow: 0px 9px 0px #84261a;
}
.push_button_maroon:active{
    -webkit-box-shadow: 0px 2px 0px #84261a;
    -moz-box-shadow: 0px 2px 0px #84261a;
    box-shadow: 0px 2px 0px #84261a;
    position:relative;
    top:7px;
}


FOR GREEN

/****************************************************
 *  Push Button Green
 *****************************************************/
.push_button_green{
 position:relative;
 width:200px;
 color:#FFF;
 display:block;
 text-decoration:none;
 margin:0 auto;
 border-radius:5px;
 border:solid 1px #31CC29;
 background:#21B519;
 text-align:center;
 padding:20px 30px;
 
 -webkit-transition: all 0.1s;
 -moz-transition: all 0.1s;
 transition: all 0.1s;
 
 -webkit-box-shadow: 0px 9px 0px #13850D;
        -moz-box-shadow: 0px 9px 0px #13850D;
        box-shadow: 0px 9px 0px #13850D;
}
.push_button_green:active{
    -webkit-box-shadow: 0px 2px 0px #13850D;
    -moz-box-shadow: 0px 2px 0px #13850D;
    box-shadow: 0px 2px 0px #13850D;
    position:relative;
    top:7px;
}


FOR BLACK
/****************************************************
 *  Push Button Black
 *****************************************************/
.push_button_black{
 position:relative;
 width:200px;
 color:#FFF;
 display:block;
 text-decoration:none;
 margin:0 auto;
 border-radius:50px;
 border:solid 2px #828282;
 background:#595959;
 text-align:center;
 padding:10px 20px;
 
 -webkit-transition: all 0.1s;
 -moz-transition: all 0.1s;
 transition: all 0.1s;
 
 -webkit-box-shadow: 0px 9px 0px #2B302B;
        -moz-box-shadow: 0px 9px 0px #2B302B;
        box-shadow: 0px 9px 0px #2B302B;
}
.push_button_black:active{
    -webkit-box-shadow: 0px 2px 0px #2B302B;
    -moz-box-shadow: 0px 2px 0px #2B302B;
    box-shadow: 0px 2px 0px #2B302B;
    position:relative;
    top:7px;
}

HTML CODE
<a href="#" class="push_button_blue/maroon/green/black">
 Grabitin
</a>


Comments

Post a Comment

Leave your views.

Popular posts from this blog

10 Free Android Apps and Games you should use/play

Welcome guys, here we have 10 free android apps and games you might like.


Google Pixel 2 and Pixel 2 XL Announced, Price and Availability In India, US and more

Google Launched it's duo Pixel 2 and Pixel 2 XL in a event on 4th of October. The event was dynamic and included more announcement that just Pixel 2 smartphones which we will see later in this article.  




Google Pixel 2 and Pixel 2 XL pack the same specs except the display. The Google Pixel 2 sports a 1080p 5-inch AMOLED display on the other hand Pixel 2 XL sports a big 1440p 6-inch P-OLED DISPLAY. Both the 2017 Pixel smartphones are powered by Qualcomm Snapdragon 835 processor, coupled with 4GB of RAM.   

The first generation Pixel and Pixel XL device got 89 rating for it's camera from DXO Mark and this year the 2017 Pixel 2 and Pixel 2 XL got 98 DXO Mark. The duo feature a 12.2MP rear camera, f/1.8 aperture, Dual-LED flash and can shoot 4K videos, they have both OIS and EIS for stabilization. Yes, the pixel does not have a dual camera, Google is using a technology, in layman language, the an image will be from two angles which will give depth perception. 


With AI and ML Google h…

HTC One M9+ Available In Netherlands For Purchase

HTC One M9+ is now available for purchase in Netherlands, but although it looks like not official.



You may also read - Samsung Galaxy S6 Vs HTC One M9+ Full Comparison

Netherland online retailer Belsimpel.nl. The phone is priced at €699 and HTC One M9+ is available in silver variant. HTC One M9+ has a 5.2-inch Super LCD3 display protected by Corning Gorilla Glass 3. It runs Android Lollipop skinned on top with HTC's Sense UI 7.0 . It is powered by 2.2GHz Octa-core processor with Mediatek MT6795T chipset. It packs 32GB internal memory with 3GB RAM and expandable memory via microSD .

It features 20MP and 2.1MP rear camera with autofocus, dual LED flash and 4MP front facing camera. It packs 2840mAh battery.

Source | Source