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

How to add Guest Book Widget For Blogger and Websites

Nokia 9 Images Leak and We See Something Satisfying

Cool Android Setups #1