Skip to main content

Cool 3D Colored CSS Buttons to Make Website Attractive

Awesome and cool 3D CSS Buttons

Guyz in this tutorial im going to provide you codes for cool and awesome CSS 3D buttons



CSS codes

body {
    webkit-gradient(linear, right top, left top, color-stop(0.5, rgb(48,48,48)), color-stop(0.5, rgb(240,240,240)) );
 font-family: anivers;
 margin: 0;
 padding: 0;
}
::selection {
 background:#ffffff;
 color:#2e2e2e;
}

::-moz-selection {
 background:#ffffff;
 color:#2e2e2e;
}

::-webkit-selection {
 background:#ffffff;
 color:#2e2e2e;
}
.clearfix:after {
 content: ".";
 visibility: hidden;
 display: block;
 height: 0;
 clear: both;
}
.wrapper {
 max-width: 960px;
 margin: 0 auto;
}
#masthead {
 width: 100%;
 margin: 25px auto;
}
#headline {
 font-size: 72px;
 color: #cc3747;
 text-align: center;
 line-height: 1em;
 font-weight: 700;
 width: 80%;
 margin: 0 auto;
 display: block;
}
#headline .char1 {
 color: #64A8A6;
 text-shadow: rgba(74,124,123,0.85) -3px 3px 0px;
}
#headline .char2 {
 color: #CC3747;
 text-shadow: rgba(141,27,39,0.85) -3px 3px 0px;
}
#headline .char3 {
 color: #E65440;
 text-shadow: rgba(165,60,46,0.85) -3px 3px 0px;
}
#headline .char4 {
 color: #78896D;
 text-shadow: rgba(81,93,74,0.85) -3px 3px 0px;
}
#headline .char6 {
 color: #64A8A6;
 text-shadow: rgba(74,124,123,0.85) -3px 3px 0px;
}
#headline .char7 {
 color: #CC3747;
 text-shadow: rgba(141,27,39,0.85) -3px 3px 0px;
}
#headline .char8 {
 color: #E65440;
 text-shadow: rgba(165,60,46,0.85) -3px 3px 0px;
}
#headline .char9 {
 color: #78896D;
 text-shadow: rgba(81,93,74,0.85) -3px 3px 0px;
}
#headline .char10 {
 color: #64A8A6;
 text-shadow: rgba(74,124,123,0.85) -3px 3px 0px;
}
#headline .char11 {
 color: #CC3747;
 text-shadow: rgba(141,27,39,0.85) -3px 3px 0px;
}
#headline .char12 {
 color: #E65440;
 text-shadow: rgba(165,60,46,0.85) -3px 3px 0px;
}
#headline .char14 {
 color: #78896D;
 text-shadow: rgba(81,93,74,0.85) -3px 3px 0px;
}
#headline .char15 {
 color: #64A8A6;
 text-shadow: rgba(74,124,123,0.85) -3px 3px 0px;
}
#headline .char16 {
 color: #CC3747;
 text-shadow: rgba(141,27,39,0.85) -3px 3px 0px;
}
#headline .char17 {
 color: #E65440;
 text-shadow: rgba(165,60,46,0.85) -3px 3px 0px;
}
#headline .char18 {
 color: #78896D;
 text-shadow: rgba(81,93,74,0.85) -3px 3px 0px;
}
#headline .char19 {
 color: #64A8A6;
 text-shadow: rgba(74,124,123,0.85) -3px 3px 0px;
}
#headline .char20 {
 color: #CC3747;
 text-shadow: rgba(141,27,39,0.85) -3px 3px 0px;
}
#sub-headline {
 font-size: 21px;
 text-shadow: rgba(175,175,175,0.85) -1px 1px 0px;
 color: #f0f0f0;
 text-align: right;
 line-height:1em;
 font-family: anivers-sc;
 margin: 0 auto;
 width: 80%;
 display: block;
 padding-right: 75px;
 text-decoration: none;
}
.light-header {
 font-size: 32px;
 color: #f0f0f0;
 text-shadow: rgba(0,0,0,0.85) 1px 1px 0px;
 line-height: 1em;
 font-weight: 700;
 margin-bottom: 20px;
}
.left {
 float: left;
}
.right {
 float: right;
}
.light-buttons {
 width: 40%;
 padding-right: 10%;
 float: left;
}

/*****Buttons*****/
.button {
 width: 9.5em;
 display: block;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 -ie-border-radius: 6px;
 border-radius: 6px;
 padding: .48em .8em;
 text-shadow: rgba(0,0,0,.5) 0px -1px 0px;
 font-size: 18px;
 font-weight: 700;
 -webkit-transition-property: background-color;
 -webkit-transition-duration: .15s;
 -webkit-transition-timing-function: ease-in-out;
 cursor: pointer;
 text-decoration: none;
 margin-bottom: 20px;
}
.button:active {
 margin-top: 25px;
 margin-bottom: 15px;
}
.button span {
 vertical-align: middle;
}
.icon {
 width: 26px;
 height: 26px;
 -webkit-border-radius: 13px;
 -moz-border-radius: 13px;
 -ie-border-radius: 13px;
 border-radius: 13px;
 background: rgba(0,0,0,.3);
 float: right;
 -webkit-box-shadow: 0px 3px 0px 0px rgba(0,0,0,.2) inset, 0px 0px 0px 1px rgba(255,255,255,.2);
 -moz-box-shadow: 0px 3px 0px 0px rgba(0,0,0,.2) inset, 0px 0px 0px 1px rgba(255,255,255,.2);
 -ie-box-shadow: 0px 3px 0px 0px rgba(0,0,0,.2) inset, 0px 0px 0px 1px rgba(255,255,255,.2);
 box-shadow: 0px 3px 0px 0px rgba(0,0,0,.2) inset, 0px 0px 0px 1px rgba(255,255,255,.2);
}
.arrow {
 margin: 7px 0px 0 8px;
 -webkit-border-style: solid;
 -moz-border-style: solid;
 -ie-border-style: solid;
 border-style: solid;
 border-width:6px 6px 6px 12px;
 width: 0;
 height: 0;
}
/********Light Background Colors********/
/*Blue*/
.lightbg-blue {
 background-color: #64a8a6;
 color: #dafffe;
 -webkit-box-shadow: 0px 0px 0px 1px #4e8381 inset, 0px 0px 0px 2px #74b6b4 inset, 0px 4px 0px 0px #4a7c7b, 0px 5px 0px 0px #355655, 0px 8px 0px 0px rgba(0,0,0,.15);
 -moz-box-shadow: 0px 0px 0px 1px #4e8381 inset, 0px 0px 0px 2px #74b6b4 inset, 0px 4px 0px 0px #4a7c7b, 0px 5px 0px 0px #355655, 0px 8px 0px 0px rgba(0,0,0,.15);
 -ie-box-shadow: 0px 0px 0px 1px #4e8381 inset, 0px 0px 0px 2px #74b6b4 inset, 0px 4px 0px 0px #4a7c7b, 0px 5px 0px 0px #355655, 0px 8px 0px 0px rgba(0,0,0,.15);
 box-shadow: 0px 0px 0px 1px #4e8381 inset, 0px 0px 0px 2px #74b6b4 inset, 0px 4px 0px 0px #4a7c7b, 0px 5px 0px 0px #355655, 0px 8px 0px 0px rgba(0,0,0,.15);
}
.lightbg-blue:hover {
 background-color: #73c2c0;
}
.lightbg-blue:active {
 background-color: #5a9896;
 -webkit-box-shadow: 0px 0px 0px 1px #589391 inset, 0px 0px 0px 2px #65a9a7 inset, 0px 1px 0px 0px #355655, 0px 3px 0px 0px rgba(0,0,0,.15);
 -moz-box-shadow: 0px 0px 0px 1px #589391 inset, 0px 0px 0px 2px #65a9a7 inset, 0px 1px 0px 0px #355655, 0px 3px 0px 0px rgba(0,0,0,.15);
 -ie-box-shadow: 0px 0px 0px 1px #589391 inset, 0px 0px 0px 2px #65a9a7 inset, 0px 1px 0px 0px #355655, 0px 3px 0px 0px rgba(0,0,0,.15);
 box-shadow: 0px 0px 0px 1px #589391 inset, 0px 0px 0px 2px #65a9a7 inset, 0px 1px 0px 0px #355655, 0px 3px 0px 0px rgba(0,0,0,.15);
}
.lightbg-blue .arrow {
 border-color: transparent transparent transparent #74b6b4;
}
/*Pink*/
.lightbg-pink {
 background-color: #cc3747;
 color: #ffdada;
 -webkit-box-shadow: 0px 0px 0px 1px #8d1b27 inset, 0px 0px 0px 2px #dd4356 inset, 0px 4px 0px 0px #8d1b27, 0px 5px 0px 0px #65141c, 0px 8px 0px 0px rgba(0,0,0,.15);
 -moz-box-shadow: 0px 0px 0px 1px #8d1b27 inset, 0px 0px 0px 2px #dd4356 inset, 0px 4px 0px 0px #8d1b27, 0px 5px 0px 0px #65141c, 0px 8px 0px 0px rgba(0,0,0,.15);
 -ie-box-shadow: 0px 0px 0px 1px #8d1b27 inset, 0px 0px 0px 2px #dd4356 inset, 0px 4px 0px 0px #8d1b27, 0px 5px 0px 0px #65141c, 0px 8px 0px 0px rgba(0,0,0,.15);
 box-shadow: 0px 0px 0px 1px #8d1b27 inset, 0px 0px 0px 2px #dd4356 inset, 0px 4px 0px 0px #8d1b27, 0px 5px 0px 0px #65141c, 0px 8px 0px 0px rgba(0,0,0,.15);
}
.lightbg-pink:hover {
 background-color: #dd3c4d;
}
.lightbg-pink:active {
 background-color: #bb3241;
 -webkit-box-shadow: 0px 0px 0px 1px #8d1b27 inset, 0px 0px 0px 2px #dd4356 inset, 0px 1px 0px 0px #8d1b27, 0px 3px 0px 0px rgba(0,0,0,.15);
 -moz-box-shadow: 0px 0px 0px 1px #8d1b27 inset, 0px 0px 0px 2px #dd4356 inset, 0px 1px 0px 0px #8d1b27, 0px 3px 0px 0px rgba(0,0,0,.15);
 -ie-box-shadow: 0px 0px 0px 1px #8d1b27 inset, 0px 0px 0px 2px #dd4356 inset, 0px 1px 0px 0px #8d1b27, 0px 3px 0px 0px rgba(0,0,0,.15);
 box-shadow: 0px 0px 0px 1px #8d1b27 inset, 0px 0px 0px 2px #dd4356 inset, 0px 1px 0px 0px #8d1b27, 0px 3px 0px 0px rgba(0,0,0,.15);
}
.lightbg-pink .arrow {
 border-color: transparent transparent transparent #dd4356;
}
/*Orange*/
.lightbg-orange {
 background-color: #e65440;
 color: #ffdada;
 -webkit-box-shadow: 0px 0px 0px 1px #b24132 inset, 0px 0px 0px 2px #ea624a inset, 0px 4px 0px 0px #a53c2e, 0px 5px 0px 0px #7e2e23, 0px 8px 0px 0px rgba(0,0,0,.15);
 -moz-box-shadow: 0px 0px 0px 1px #b24132 inset, 0px 0px 0px 2px #ea624a inset, 0px 4px 0px 0px #a53c2e, 0px 5px 0px 0px #7e2e23, 0px 8px 0px 0px rgba(0,0,0,.15);
 -ie-box-shadow: 0px 0px 0px 1px #b24132 inset, 0px 0px 0px 2px #ea624a inset, 0px 4px 0px 0px #a53c2e, 0px 5px 0px 0px #7e2e23, 0px 8px 0px 0px rgba(0,0,0,.15);
 box-shadow: 0px 0px 0px 1px #b24132 inset, 0px 0px 0px 2px #ea624a inset, 0px 4px 0px 0px #a53c2e, 0px 5px 0px 0px #7e2e23, 0px 8px 0px 0px rgba(0,0,0,.15);
}
.lightbg-orange:hover {
 background-color: #f15843;
}
.lightbg-orange:active {
 background-color: #d54e3b;
 -webkit-box-shadow: 0px 0px 0px 1px #b24132 inset, 0px 0px 0px 2px #ea624a inset, 0px 1px 0px 0px #a53c2e, 0px 3px 0px 0px rgba(0,0,0,.15);
 -moz-box-shadow: 0px 0px 0px 1px #b24132 inset, 0px 0px 0px 2px #ea624a inset, 0px 1px 0px 0px #a53c2e, 0px 3px 0px 0px rgba(0,0,0,.15);
 -ie-box-shadow: 0px 0px 0px 1px #b24132 inset, 0px 0px 0px 2px #ea624a inset, 0px 1px 0px 0px #a53c2e, 0px 3px 0px 0px rgba(0,0,0,.15);
 box-shadow: 0px 0px 0px 1px #b24132 inset, 0px 0px 0px 2px #ea624a inset, 0px 1px 0px 0px #a53c2e, 0px 3px 0px 0px rgba(0,0,0,.15);
}
.lightbg-orange .arrow {
 border-color: transparent transparent transparent #ea624a;
}
/*Green*/
.lightbg-green {
 background-color: #78896d;
 color: #e2f1d8;
 -webkit-box-shadow: 0px 0px 0px 1px #63715a inset, 0px 0px 0px 2px #87977a inset, 0px 4px 0px 0px #63715a, 0px 5px 0px 0px #535e4b, 0px 8px 0px 0px rgba(0,0,0,.15);
 -moz-box-shadow: 0px 0px 0px 1px #63715a inset, 0px 0px 0px 2px #87977a inset, 0px 4px 0px 0px #63715a, 0px 5px 0px 0px #535e4b, 0px 8px 0px 0px rgba(0,0,0,.15);
 -ie-box-shadow: 0px 0px 0px 1px #63715a inset, 0px 0px 0px 2px #87977a inset, 0px 4px 0px 0px #63715a, 0px 5px 0px 0px #535e4b, 0px 8px 0px 0px rgba(0,0,0,.15);
 box-shadow: 0px 0px 0px 1px #63715a inset, 0px 0px 0px 2px #87977a inset, 0px 4px 0px 0px #63715a, 0px 5px 0px 0px #535e4b, 0px 8px 0px 0px rgba(0,0,0,.15);
}
.lightbg-green:hover {
 background-color: #8b9f7f;
}
.lightbg-green:active {
 background-color: #68775f;
 -webkit-box-shadow: 0px 0px 0px 1px #63715a inset, 0px 0px 0px 2px #87977a inset, 0px 1px 0px 0px #63715a, 0px 3px 0px 0px rgba(0,0,0,.15);
 -moz-box-shadow: 0px 0px 0px 1px #63715a inset, 0px 0px 0px 2px #87977a inset, 0px 1px 0px 0px #63715a, 0px 3px 0px 0px rgba(0,0,0,.15);
 -ie-box-shadow: 0px 0px 0px 1px #63715a inset, 0px 0px 0px 2px #87977a inset, 0px 1px 0px 0px #63715a, 0px 3px 0px 0px rgba(0,0,0,.15);
 box-shadow: 0px 0px 0px 1px #63715a inset, 0px 0px 0px 2px #87977a inset, 0px 1px 0px 0px #63715a, 0px 3px 0px 0px rgba(0,0,0,.15);
}
.lightbg-green .arrow {
 border-color: transparent transparent transparent #87977a;
}

HTML CODES

<section id="content" class="clearfix">
  <section class="light-buttons">
  <div class="right">
    <h1 class="dark-header">Light</h1>
    <a href="#" class="button lightbg-blue clearfix"><span>Blue Button</span>
    <div class="icon">
      <div class="arrow"></div>
    </div>
    </a> <a href="#" class="button lightbg-pink clearfix"><span>Pink Button</span>
    <div class="icon">
      <div class="arrow"></div>
    </div>
    </a> <a href="#" class="button lightbg-orange clearfix"><span>Orange Button</span>
    <div class="icon">
      <div class="arrow"></div>
    </div>
    </a> <a href="#" class="button lightbg-green clearfix"><span>Green Button</span>
    <div class="icon">
      <div class="arrow"></div>
    </div>
    </a> 
    </div>
    </section>

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