Expose

5By2.tk

Showing posts with label CSS3 Button. Show all posts
Showing posts with label CSS3 Button. Show all posts

<html>
<head>
<style>
*{
 margin: 0;
 padding: 0;
 -moz-box-sizing: border-box;
 -o-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}
body{
 background:-webkit-linear-gradient(left top,#000,#aaa,#000) ;
 background:-moz-linear-gradient(left top,#000,#aaa,#000) ;
 background:-ms-linear-gradient(left top,#000,#aaa,#000) ;
 background:-o-linear-gradient(left top,#000,#aaa,#000) ;
}

ul {
 margin: 30px auto;
 text-align: center;
}

li {
 list-style: none;
 position: relative;
 display: inline-block;
 width: 100px;
 height: 100px;
}
.round {
 display: block;
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 padding-top: 30px;  
 text-decoration: none;  
 text-align: center;
 font-size: 25px;  
 text-shadow: 0 1px 0 #ddd,0 -1px 0 #ddd,1px 0px 0 #ddd,-1px 0px 0 #ddd;
 letter-spacing: -.065em;
 font-family: "Hammersmith One", sans-serif;  
 -webkit-transition: all .25s ease-in-out;
 -o-transition: all .25s ease-in-out;
 -moz-transition: all .25s ease-in-out;
 -ms-transition: all .25s ease-in-out;
 transition: all .25s ease-in-out;
 box-shadow: 2px 2px 7px rgba(0,0,0,.2);
 border-radius: 900px;
 z-index: 1;
 border-width: 4px;
 border-style: solid;
}

.round:hover {
 width: 130%;
 height: 130%;
 left: -15%;
 top: -15%;
 font-size: 33px;
 padding-top: 38px;
 -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
 -o-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
 -moz-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
 -ms-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
 box-shadow: 5px 5px 10px rgba(0,0,0,.3);
 z-index: 2;
 border-size: 10px;
 -webkit-transform: rotate(-360deg);
 -moz-transform: rotate(-360deg);
 -ms-transform: rotate(-360deg);
 -o-transform: rotate(-360deg);
 transform: rotate(-360deg);
}

a.red {
 background-color: rgba(239,57,50,1);
 color: rgba(133,32,28,1);
 border-color: rgba(133,32,28,.2);
}

a.red:hover {
 color: rgba(239,57,50,1);
}

a.green {
 background-color: rgba(1,151,171,1);
 color: rgba(0,63,71,1);
 border-color: rgba(0,63,71,.2);
}

a.green:hover {
 color: rgba(1,151,171,1);
}

a.yellow {
 background-color: rgba(252,227,1,1);
 color: rgba(153,38,0,1);
 border-color: rgba(153,38,0,.2);
}

a.yellow:hover {
 color: rgba(252,227,1,1);
}

.round span.round {
 display: block;
 opacity: 0;
 -webkit-transition: all .5s ease-in-out;
 -moz-transition: all .5s ease-in-out;
 -ms-transition: all .5s ease-in-out;
 -o-transition: all .5s ease-in-out;
 transition: all .5s ease-in-out;
 font-size: 1px;
 border: none;
 padding: 40% 20% 0 20%;
 color: #fff;
}

.round span:hover {
 opacity: .85;
 font-size: 16px;
 text-shadow: 0 1px 1px rgba(0,0,0,.5); 
}

.green span {
 background: rgba(0,63,71,.7);  
}

.red span {
 background: rgba(133,32,28,.7);  
}

.yellow span {
 background: rgba(161,145,0,.7); 

}
.round:active{
 width: 120%;
 height: 120%;
 left: -10%;
 top: -10%;
}
</style>
</head>
<body>
<ul>
 <li><a href="#" class="round green">Login<span class="round">That is, if you already have an account.</span></a></li>
 <li><a href="#" class="round red">Sign Up<span class="round">But only if you really, really want to. </span></a></li>
 <li><a href="#" class="round yellow">Demo<span class="round">Take a look. This product is totally rad!</span></a></li>
</ul>
</body>
</html>



<html>
<head>
<style>
.buttons {
 position: relative;
 white-space: nowrap;
 min-height: 33px;
 margin-bottom: 30px;
 top: 100px;
 margin-left: 50px 
}
.buttons a 
{
 -webkit-animation: bounceInDown 900ms 200ms ease-in-out both;
 -moz-animation: bounceInDown 900ms 200ms ease-in-out both;
 -ms-animation: bounceInDown 900ms 200ms ease-in-out both;
 -o-animation: bounceInDown 900ms 200ms ease-in-out both;
 animation: bounceInDown 900ms 200ms ease-in-out both;
 width: 50px;
 height: 33px;
 position: absolute;
 top: 0;
 text-decoration: none;
 padding-top: 9px;
 outline-width: 0px;
 z-index: 990;
 color: #a675b3;
 text-align: center;
 line-height: 26px;
 display: block; 
}
.buttons a:not(.active) {
 -webkit-box-shadow: inset 0 1px 1px rgba(111, 55, 125, 0.8), inset 0 -1px 0px rgba(63, 59, 113, 0.2), 0 9px 16px 0 rgba(0, 0, 0, 0.3), 0 4px 3px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px #150a1e;
 -moz-box-shadow: inset 0 1px 1px rgba(111, 55, 125, 0.8), inset 0 -1px 0px rgba(63, 59, 113, 0.2), 0 9px 16px 0 rgba(0, 0, 0, 0.3), 0 4px 3px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px #150a1e;
 box-shadow: inset 0 1px 1px rgba(111, 55, 125, 0.8), inset 0 -1px 0px rgba(63, 59, 113, 0.2), 0 9px 16px 0 rgba(0, 0, 0, 0.3), 0 4px 3px 0 rgba(0, 0, 0, 0.5), 0 0 0 1px #150a1e;
 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3b2751), color-stop(100%, #271739));
 background-image: -webkit-linear-gradient(#3b2751, #271739);
 background-image: -moz-linear-gradient(#3b2751, #271739);
 background-image: -o-linear-gradient(#3b2751, #271739);
 background-image: linear-gradient(#3b2751, #271739);
 text-shadow: 0 0 21px rgba(223, 206, 228, 0.5), 0 -1px 0 #311d47; 
}
.buttons a:not(.active):hover, .buttons a:not(.active):focus {
 -webkit-transition: color 200ms linear;
 -moz-transition: color 200ms linear;
 -o-transition: color 200ms linear;
 transition: color 200ms linear;
 -webkit-transition: text-shadow 500ms linear;
 -moz-transition: text-shadow 500ms linear;
 -o-transition: text-shadow 500ms linear;
 transition: text-shadow 500ms linear;
 color: #caadd2;
 text-shadow: 0 0 21px rgba(223, 206, 228, 0.5), 0 0 10px rgba(223, 206, 228, 0.4), 0 0 2px #2a153c; 
}
.buttons a:not(.active):active {
 color: #e4e3ce !important; 
}
.buttons a.active, .buttons a:active {
 -webkit-box-shadow: 0 9px 16px 0 rgba(0, 0, 0, 0.1), 0 0 0 1px #170c22, 0 2px 1px 0 rgba(121, 65, 135, 0.5), inset 0 0 4px 3px rgba(15, 8, 22, 0.2);
 -moz-box-shadow: 0 9px 16px 0 rgba(0, 0, 0, 0.1), 0 0 0 1px #170c22, 0 2px 1px 0 rgba(121, 65, 135, 0.5), inset 0 0 4px 3px rgba(15, 8, 22, 0.2);
 box-shadow: 0 9px 16px 0 rgba(0, 0, 0, 0.1), 0 0 0 1px #170c22, 0 2px 1px 0 rgba(121, 65, 135, 0.5), inset 0 0 4px 3px rgba(15, 8, 22, 0.2);
 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1f132e), color-stop(100%, #311d47));
 background-image: -webkit-linear-gradient(#1f132e, #311d47);
 background-image: -moz-linear-gradient(#1f132e, #311d47);
 background-image: -o-linear-gradient(#1f132e, #311d47);
 background-image: linear-gradient(#1f132e, #311d47);
 text-shadow: 0 0 21px rgba(223, 206, 228, 0.5), 0 0 10px rgba(223, 206, 228, 0.4), 0 0 2px #2a153c;
 color: #e4e3ce; 
}
.buttons a.active:before, .buttons a:active:before {
 position: absolute;
 display: block;
 content: "";
 width: 1px;
 height: 36px;
 top: 1px;
 left: -2px;
 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(91, 35, 105, 0)), color-stop(41%, #5b2369), color-stop(59%, #5b2369), color-stop(100%, rgba(91, 35, 105, 0)));
 background-image: -webkit-linear-gradient(rgba(91, 35, 105, 0), #5b2369 41%, #5b2369 59%, rgba(91, 35, 105, 0));
 background-image: -moz-linear-gradient(rgba(91, 35, 105, 0), #5b2369 41%, #5b2369 59%, rgba(91, 35, 105, 0));
 background-image: -o-linear-gradient(rgba(91, 35, 105, 0), #5b2369 41%, #5b2369 59%, rgba(91, 35, 105, 0));
 background-image: linear-gradient(rgba(91, 35, 105, 0), #5b2369 41%, #5b2369 59%, rgba(91, 35, 105, 0));
 -webkit-box-shadow: -2px 0 6px 0 #5b2369;
 -moz-box-shadow: -2px 0 6px 0 #5b2369;
 box-shadow: -2px 0 6px 0 #5b2369; 
}
.buttons a.active:after, .buttons a:active:after {
 position: absolute;
 display: block;
 content: "";
 width: 1px;
 height: 36px;
 top: 1px;
 right: -2px;
 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(91, 35, 105, 0)), color-stop(41%, #5b2369), color-stop(59%, #5b2369), color-stop(100%, rgba(91, 35, 105, 0)));
 background-image: -webkit-linear-gradient(rgba(91, 35, 105, 0), #5b2369 41%, #5b2369 59%, rgba(91, 35, 105, 0));
 background-image: -moz-linear-gradient(rgba(91, 35, 105, 0), #5b2369 41%, #5b2369 59%, rgba(91, 35, 105, 0));
 background-image: -o-linear-gradient(rgba(91, 35, 105, 0), #5b2369 41%, #5b2369 59%, rgba(91, 35, 105, 0));
 background-image: linear-gradient(rgba(91, 35, 105, 0), #5b2369 41%, #5b2369 59%, rgba(91, 35, 105, 0));
 -webkit-box-shadow: 2px 0 6px 0 #5b2369;
 -moz-box-shadow: 2px 0 6px 0 #5b2369;
 box-shadow: 2px 0 6px 0 #5b2369; 
}
.buttons a.active {
 z-index: 1000; 
}
.buttons a:active {
 z-index: 999; 
}
.buttons a:last-of-type {
 -webkit-border-radius: 0 7px 7px 0;
 -moz-border-radius: 0 7px 7px 0;
 -ms-border-radius: 0 7px 7px 0;
 -o-border-radius: 0 7px 7px 0;
 border-radius: 0 7px 7px 0; 
}
.buttons a:first-of-type {
 -webkit-border-radius: 7px 0 0 7px;
 -moz-border-radius: 7px 0 0 7px;
 -ms-border-radius: 7px 0 0 7px;
 -o-border-radius: 7px 0 0 7px;
 border-radius: 7px 0 0 7px;
 left: 0; 
}
.buttons a:nth-of-type(2) {
 left: 51px; 
}
.buttons a:nth-of-type(3) {
 left: 102px; 
}
.buttons a:nth-of-type(4) {
 left: 153px; 
}
.buttons a:nth-of-type(5) {
 left: 204px; 
}
.buttons a:nth-of-type(6) {
 left: 255px; 
}
.buttons a:nth-of-type(7) {
 left: 306px; 
}
.buttons a:nth-of-type(8) {
 left: 357px; 
}
.buttons a i:before {
 margin-left: 2px;
 font-size: 22px; 
}
.buttons a i.icon-bar-chart:before {
 font-size: 20px;
 margin-top: 0px; 
}
.buttons a i.icon-sync:before {
 font-size: 20px;
 margin-left: 3px;
 margin-top: 1px; 
}
.buttons a i.icon-download:before {
 font-size: 19px;
 margin-top: 1px;
 margin-left: 4px; 
}
body, html { 
 padding: 0; height: 100%; overflow: hidden;font-size:32px;
 background-image: linear-gradient(#faf,#509); 
}
</style>
</head>
<body>
<div class='buttons'>
      <a href='#' title='Title 1'>
       &#x2620;
      </a>
      <a class='active' href='#' title='Title 2'>
       &#x2623;
      </a>
      <a href='#' title='Title 3'>
        &#x266b;
      </a>
      <a href='#' title='Title 4'>
     &#x265c;
      </a>
      <a href='#' title='Title 4'>
       &#x265e;
      </a>
    </div>
</body>
</html>



<html>
<head>
<style>
html body{
 background-color:#C6EDFF;
 font-family: 'Enriqueta',Sans-Serif;
 padding-bottom: 30px;
}
.button{
 /*[ Position ]*/
 margin:0 10px 50px 10px;
 float:left;
 left: 200px;
 top:90px;
 /* [ Botton ] */
 position:relative;
 height:50px;
 width:50px;
 cursor:pointer;
 line-height:47px;
 background-color:#f1f1f1;
 text-align:center;
 font-size:30px;
 display:inline-block;
 text-shadow:0px -1px 1px rgba(255,255,255,0.5);
 color:#444;
 /* Transitions */
 -moz-transition:.1s ease-out;
 -webkit-transition:.1s ease-out;
 -o-transition:.1s ease-out;
 -ms-transition:.1s ease-out;
 -khtml-transition:.1s ease-out;
 transition:.1s ease-out;
 /* Shadows */
 box-shadow:inset 0 0 5px 0 rgba(255,255,255,0.5);
 -moz-box-shadow:inset 0 0 5px 0 rgba(255,255,255,0.5);
 -ms-box-shadow:inset 0 0 5px 0 rgba(255,255,255,0.5);
 -webkit-box-shadow:inset 0 0 5px 0 rgba(255,255,255,0.5);
 -khtml-box-shadow:inset 0 0 5px 0 rgba(255,255,255,0.5);
 -o-box-shadow:inset 0 0 5px 0 rgba(255,255,255,0.5);
 /* Borders */
 border-width:1px;
 border-style:solid;
 border-left-color:#777;
 border-right-color:#777;
 border-top-color:#999;
 border-bottom:4px solid #555;
 /* {{ No selectable }} */
 user-select:none;
 -moz-user-select:none;
 -webkit-user-select:none;
 -o-user-select:none;
 -ms-user-select:none;
 -khtml-user-select:none;
 /*[{- Border radius -}]*/
 border-radius:50px;
 -moz-border-radius:50px;
 -webkit-border-radius:50px;
 -ms-border-radius:50px;
 -khtml-border-radius:50px;
 -o-border-radius:50px;
 /* Gradient */
 background-image:-moz-linear-gradient(top,transparent,rgba(0,0,0,0.2));
 background-image:-webkit-linear-gradient(top,transparent,rgba(0,0,0,0.2));
 background-image:-o-linear-gradient(top,transparent,rgba(0,0,0,0.2));
 background-image:-khtml-linear-gradient(top,transparent,rgba(0,0,0,0.2));
 background-image:-ms-linear-gradient(top,transparent,rgba(0,0,0,0.2));
 background-image:linear-gradient(top,transparent,rgba(0,0,0,0.2));
}
.button:hover{
 color:#333;
 /*{Gradient}*/
 background-image:-moz-linear-gradient(top,transparent,rgba(0,0,0,0.17));
 background-image:-webkit-linear-gradient(top,transparent,rgba(0,0,0,0.17));
 background-image:-ms-linear-gradient(top,transparent,rgba(0,0,0,0.17));
 background-image:-khtml-linear-gradient(top,transparent,rgba(0,0,0,0.17));
 background-image:-o-linear-gradient(top,transparent,rgba(0,0,0,0.17));
 background-image:linear-gradient(top,transparent,rgba(0,0,0,0.17));
}
.button:active{
 margin-top:4px;
 color:#777;
 border:1px solid #999;
 box-shadow:inset 0 2px 2px 0 #000;
}
.text-shadow-negra{
 text-shadow:-1px -1px 0 rgba(0,0,0,0.2);
}
.text-blanco{
 text-shadow:0 0 5px #000;
 color:#FFF;
}
.text-blanco:hover{
 text-shadow:0 0 1px #fff;
 color:#FFF;
 font-size:32px;
}
.text-blanco:active{
 color:#DDC;
}
.blue{
 background-color:#659AE0;
 border-color:#5981AF #5981AF #436796 #719CCE;
}
.red{
 background-color:#C66;
 border-color:#C66767 #AF5757 #AF5757 #A05D5D;
}
.green{
 background-color:#82C43A;
 border-color:#578720;
}
.yellow{
 background-color:#fa0;
 border-color:#9B9800;
}
.brown{
 background-color:#594343;
 border-color:#7C6262 #423F1B #3F3D28 #3F3D28;
}
.orange{
 background-color:#f70;
 border-color:#DB8A00 #DB8A00 #BA7500 #E89200;
}
</style>
</head>
<body>
 <div id="white" class="button text-blanco">&#x2735;</div>
 <div id="blue" class="button blue text-blanco text-shadow-negra">&#x2730;</div>
 <div id="red" class="button red text-blanco text-shadow-negra">&#27242624;</div>
 <div id="green" class="button green text-blanco text-shadow-negra">&#x2726;</div>
 <div id="yellow" class="button yellow text-blanco text-shadow-negra">&#x2721;</div>
 <div id="brown" class="button brown text-blanco text-shadow-negra">&#x2725;</div>
 <div id="orange" class="button orange text-blanco text-shadow-negra">&#x2020;</div>
</body>
</html>



<html>
<head>
<style>
body {
 font-family: Impact;
}
.button {
 height: 80px;
 width: 180px;
 cursor: pointer;
 margin: 50px auto;
}
.button .outer {
 position: relative;
 width: 100%;
 height: 100%;
 padding: 10px;
 background: rgba(0,0,0,0.65);
 border-radius: 14px;
 -webkit-border-radius: 14px;
 -moz-border-radius: 14px;
 box-shadow: inset rgba(0,0,0,0.85) 0px 1px 5px;
 -webkit-box-shadow: inset rgba(0,0,0,0.85) 0px 1px 5px;
 -moz-box-shadow: inset rgba(0,0,0,0.85) 0px 1px 5px;
 -webkit-transform: perspective(500px) rotateX(35deg);
 -moz-transform: perspective(500px) rotateX(35deg);
}
.button .outer .height {
 position: relative;
 height: 100%;
 margin-top: -15px;
 padding-bottom: 15px;
 background: #39a02d;
 border-radius: 16px;
 -webkit-border-radius: 16px;
 -moz-border-radius: 16px;
 box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px;
 -webkit-box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px;
 -moz-box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px;
 -webkit-transition: all 0.1s ease-in-out;
 -moz-transition: all 0.1s ease-in-out;
}       
.button:hover .outer .height {
 margin-top: -10px;
 padding-bottom: 10px;
 background: #3aaf2d;
 box-shadow: rgba(0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px;
 -webkit-box-shadow: rgba(0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px;
 -moz-box-shadow: rgba( 0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px;
}
.button:active .outer .height {
 margin-top: 0px;
 padding-bottom: 0px;
}
.button .outer .height .inner {
 line-height: 2.8em;
 font-size: 30px;
 letter-spacing: .05em;
 position: relative;
 height: 100%;
 text-align: center;
 text-shadow: #8aff7b 0px 0px 1px;
 background: #44d135;
 background: -moz-linear-gradient(top, #80ec75 0%, #43d034 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80ec75), color-stop(100%,#43d034)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #80ec75 0%,#43d034 100%); /* Chrome10+,Safari5.1+ */
 background: linear-gradient(top, #80ec75 0%,#43d034 100%); /* W3C */
 border-radius: 12px;
 -webkit-border-radius: 12px;
 -moz-border-radius: 12px;
 box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;
 -webkit-box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;
 -moz-box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;
 -webkit-transition: all 0.1s ease-in-out;
 -moz-transition: all 0.1s ease-in-out;
}
.button:hover .outer .height .inner{
 text-shadow: #99f48d 0px 0px 1px;
 background: #43d034; /* Old browsers */
 background: -moz-linear-gradient(top, #43d034 0%, #67e45c 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#43d034), color-stop(100%,#67e45c)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #43d034 0%,#67e45c 100%); /* Chrome10+,Safari5.1+ */
 background: linear-gradient(top, #43d034 0%,#67e45c 100%); /* W3C */
}
.button:active .outer .height .inner{
 text-shadow: #319926 0px 1px 0px;
 border-radius: 16px;
 -webkit-border-radius: 16px;
 -moz-border-radius: 16px;
 box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;
 -webkit-box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;
 -moz-box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;
 background: #1d7d12; /* Old browsers */
 background: -moz-linear-gradient(top, #1d7d12 0%, #4fd342 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1d7d12), color-stop(100%,#4fd342)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #1d7d12 0%,#4fd342 100%); /* Chrome10+,Safari5.1+ */
 background: linear-gradient(top, #1d7d12 0%,#4fd342 100%); /* W3C */
}
</style>
</head>
<body>
<div class="button">
 <div class="outer">
  <div class="height">
   <div class="inner">DOWNLOAD</div>
  </div>
 </div>
</div>
</body>
</html>



<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">
<h1>Administration bar with buttons and icons</h1>
<h2>hint: try to toggle click on buttons</h2>
<div class="button-group-navigation">
    <li><a class="btn" href="#">&#x263b;</a></li>
    <li><a class="btn" href="#">&#x263a;</a></li>
    <li><a class="btn" href="#">&#x2729;</a></li>
    <li><a class="btn" href="#">&#x2740;</a></li>
    <li><a class="btn" href="#">&#x2741;</a></li>
</div>
<style>
body{
 background:#54282b;
}
h1 {
 font-size:30px;
 font-family: 'Lato', sans-serif;
 color:#fff;
}
h2 {
 font-size:25px;
 font-family: 'Lato', sans-serif;
 color:#fff;
}
.btn {
    padding:30px 40px;
 margin: 0 1px 0 0;
 text-decoration: none;
 text-align: center;
 color: #fff;
 font-size:40px;
 cursor: pointer;
 background: #2c3e50;
 border-bottom: 10px solid #34495e;
}
.btn.active{
    border-bottom: 10px solid #2ecc71;
 transition-property:border-bottom .6s ease-in-out 0s;
 -moz-transition:border-bottom .6s ease-in-out 0s;
 -webkit-transition:border-bottom .6s ease-in-out 0s;
 -o-transition:border-bottom .6s ease-in-out 0s;
 color:#2ecc71;
 box-shadow:0 5px 25px #fff,0 -5px 25px #fff,-5px 0 25px #fff,0 0px 0px #fff inset;
 transition-property:box-shadow .6s ease-in-out 0.5s;
 -moz-transition:box-shadow .6s ease-in-out 0.5s;
 -webkit-transition:box-shadow .6s ease-in-out 0.5s;
 -o-transition:box-shadow .6s ease-in-out 0.5s;
}
.button-group-navigation li {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
    zoom: 1;
 background:#7f8c8d;
}

.button-group-navigation li .btn {
    float: left;
    margin-left:-4px;
}

.button-group-navigation > .btn:not(:first-child):not(:last-child),
.button-group-navigation li:not(:first-child):not(:last-child) .btn {
    border-radius: 0;
}

.button-group-navigation > .btn:first-child,
.button-group-navigation li:first-child .btn {
    margin-left: 0;
}

.button-group-navigation > .btn:last-child,
.button-group-navigation li:last-child > .btn {
    margin-right:0;

}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.min.js"></script>
<script>

$(window).load(function(){
$('a.btn').click(function(){
    $( this ).toggleClass( "active" );
});
});
</script>



<html>
<head>
<STYLE>
button {
 width:100px;
 height:100px;
 display:inline-block;
 color:#fff;
 text-decoration:none;
 text-align:center;
 text-shadow:1px 1px 0px #07526e;
 padding-top:6px;
 left:30px;
 position:relative;
 cursor:pointer;
 border: none;
 background: #109bce;
 border-radius: 5px;
 box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;
}
button:active {
 top:3px;
 box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;
}
button:before {
 font-family: 'socialfont';
 font-size: 40px;
 line-height: 1em;
 font-weight: normal;
 color: #fff;
 content:"5";
 width:85px;
 height:90px;
 display:block;
 position:absolute;
 padding-top:10px;
 top:10px;
 text-shadow: 1px 1px 2px #07526e;
}
button:active:before {
  top: 7px;
  font-size: 40px;
  text-shadow: 0px 3px 0px #07526e, 0px 5px 1px #07526e;
}
.btn2:before {
  content:"By";
}
.btn3:before {
  content:"2";
}
.btn4:before{
 width:100px;
  content:".Blogspot .in"; 
}
</style>
</head>
<body>
<br/>
<p>
 <button class="btn1"></button>
 <button class="btn2"></button>
 <button class="btn3"></button>
 <button class="btn4" style="width:170px;"></button>
</p>
</body>
</html>



<html>
<head>
<style>
body{
   background-image: -webkit-linear-gradient(LEFT,#aaa, #ccc, #aaa);
}
.buttonHolder{
  margin:80px auto;
  width:500px;
}
.button{
 background-image: -webkit-linear-gradient(top, #f4f1ee, #fff);
 background-image: linear-gradient(top, #f4f1ee, #fff);
 border-radius: 50%;
 box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, .3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5);
 float:left;
 height: 70px;
 margin: 0 30px 30px 0;
 position: relative;
 width: 70px;   
 -webkit-transition: all .1s linear;
 transition: all .1s linear;
}
.button:after{
 color:#e9e6e4;
 content: "";
 display: block;
 font-size: 30px;
 height: 30px;
 text-decoration: none;
 text-shadow: 0px -1px 1px #bdb5b4, 1px 1px 1px white;
 position: absolute;
 width: 30px;
}
.btn1:after{
 content: "S";
 left: 24px;
 top: 19px;
}
.btn2:after{
 content: "U";
 left:23px;
 top:20px;
}
.btn3:after{
 content: "R";
 left: 21px;
 top: 21px;
}
.btn4:after{
 content: "Y";
 left: 23px;
 top: 19px;
}
.btn5:after{
 content: "A";
 left: 23px;
 top: 19px;
}
.button:hover{
 background-image: -webkit-linear-gradient(top, #fff, #f4f1ee);
 background-image: linear-gradient(top, #fff, #f4f1ee);
 color:#0088cc;
}
.btn1:hover:after{
 color:#eb2f2f;
 text-shadow:0px 0px 6px #eb2f2f;
}
.btn2:hover:after{
 color:#83d244;
 text-shadow:0px 0px 6px #83d244;
}
.btn3:hover:after{
 color:#000;
 text-shadow:0px 0px 6px #000;
}
.btn4:hover:after{
 color:#f99e4e;
 text-shadow:0px 0px 6px #f99e4e;
}
.btn5:hover:after{
 color:#00F;
 text-shadow:0px 0px 6px #00F;
}
.button:active{
 background-image: -webkit-linear-gradient(top, #efedec, #f7f4f4);
 background-image: linear-gradient(top, #efedec, #f7f4f4);
 box-shadow: 0 3px 5px 0 rgba(0,0,0,.4), inset 0px -3px 1px 1px rgba(204,198,197,.5);
}
.button:active:after{
 color:#dbd2d2;
 text-shadow: 0px -1px 1px #bdb5b4, 0px 1px 1px white;
}
</style>
</head>
<body>
 <div class="buttonHolder">
   <a href="#" class="button btn1"></a>
   <a href="#" class="button btn2"></a>
   <a href="#" class="button btn3"></a>
   <a href="#" class="button btn4"></a>
   <a href="#" class="button btn5"></a>
 </div>
</body>
</html>




<html>
<head>
<style type="text/css">
body {
 background-color:#eee;
 text-align:center;
 margin:85px 0;
}

.toggle {
 position:relative;
 display:inline-block;
 width:40px;
 height:60px;
 background-color:#bbb;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 text-align:center;
}

.toggle input {
 width:100%;
 height:100%;
 margin:0 0;
 padding:0 0;
 position:absolute;
 top:0;
 right:0;
 bottom:0;
 left:0;
 z-index:2;
 cursor:pointer;
 opacity:0;
 filter:alpha(opacity=0);
}

.toggle label {
 display:block;
 position:absolute;
 top:1px;
 right:1px;
 bottom:1px;
 left:1px;
 background-image:-webkit-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
 background-image:-moz-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
 background-image:-ms-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
 background-image:-o-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
 background-image:linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
  -webkit-box-shadow:0 2px 3px rgba(0,0,0,0.4),
    inset 0 -1px 1px #888,
    inset 0 -5px 1px #bbb,
    inset 0 -6px 0 white;
  -moz-box-shadow:0 2px 3px rgba(0,0,0,0.4),
    inset 0 -1px 1px #888,
    inset 0 -5px 1px #bbb,
    inset 0 -6px 0 white;
  box-shadow:0 2px 3px rgba(0,0,0,0.4),
    inset 0 -1px 1px #888,
    inset 0 -5px 1px #bbb,
    inset 0 -6px 0 white;
 -webkit-border-radius:3px;
 -moz-border-radius:3px;
 border-radius:3px;
 font:normal 11px Arial,Sans-Serif;
 color:#666;
 text-shadow:0 1px 0 white;
 cursor:text;
}

.toggle label:before {
 content:attr(data-off);
 position:absolute;
 top:6px;
 right:0;
 left:0;
 z-index:4;
}

.toggle label:after {
 content:attr(data-on);
 position:absolute;
 right:0;
 bottom:11px;
 left:0;
 color:#666;
 text-shadow:0 -1px 0 #eee;
}

.toggle input:checked + label {
 background-image:-webkit-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
 background-image:-moz-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
 background-image:-ms-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
 background-image:-o-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
 background-image:linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
  -webkit-box-shadow:0 0 1px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
  -moz-box-shadow:0 0 1px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
  box-shadow:0 0 1px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
}

.toggle input:checked:hover + label {
  box-shadow:0 1px 3px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
}

.toggle input:checked + label:before {
 z-index:1;
 top:11px;
}

.toggle input:checked + label:after {
 bottom:9px;
 color:#aaa;
 text-shadow:none;
 z-index:4;
}
</style>
</head>
<body>
 <span class="toggle">
      <input type="checkbox" checked>
   <label data-off="&#10006;" data-on="&#10004;" ></label>
 </span>
 <span class="toggle">
   <input type="checkbox">
   <label data-off="&#9724;" data-on="&#9654;"></label>
 </span>
 <span class="toggle">
    <input type="checkbox">
   <label data-off="Stop" data-on="Play"></label>
 </span>
</body>
</html>



<html>
<head>
<style>
body {
 background-color: #ddd;
 font-family: Helvetica,Helvetica Neue,Arial;
 color: #757575;
 font-size: 14px;
 line-height: 1;
}
.clear {
 clear: both;
}
.rss {
 width: 400px;
 height: 300px;
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -150px 0 0 -200px;
 background: #d4d5d6;
 background: -webkit-linear-gradient(top, #d4d5d6 0%, #d2d3d4 22%, #c8c9ca 68%, #c8c9ca 100%);
 background: -moz-linear-gradient(top, #d4d5d6 0%, #d2d3d4 22%, #c8c9ca 68%, #c8c9ca 100%);
 background: -o-linear-gradient(top, #d4d5d6 0%, #d2d3d4 22%, #c8c9ca 68%, #c8c9ca 100%);
 background: -ms-linear-gradient(top, #d4d5d6 0%, #d2d3d4 22%, #c8c9ca 68%, #c8c9ca 100%);
 background: linear-gradient(top, #d4d5d6 0%, #d2d3d4 22%, #c8c9ca 68%, #c8c9ca 100%);
 box-shadow: 0 0px 20px 0 #000 inset;
 border-radius:0 0 15px 15px;
 text-align: center;
 overflow: hidden;
}
.rss:before {
 content: "";
 background: -webkit-radial-gradient(center, ellipse cover, rgba(254,254,254,1) 0%, rgba(254,254,254,0) 50%,
rgba(254,254,254,0) 100%);
 background: -moz-radial-gradient(center, ellipse cover, rgba(254,254,254,1) 0%,rgba(254,254,254,0) 50%,rgba(254,254,254,0) 100%);
 background: -ms-radial-gradient(center, ellipse cover,rgba(254,254,254,1) 0%, rgba(254,254,254,0) 50%,rgba(254,254,254,0) 100%);
 background: -o-radial-gradient(center, ellipse cover,rgba(254,254,254,1) 0%,rgba(254,254,254,0) 50%,rgba(254,254,254,0) 100%);
 width: 600px;
 height: 600px;
 display: block;
 position: absolute;
 top: -300px;
 left: 50%;
 margin-left: -300px;
 opacity: 0.8;
}

label {
 width: 90px;
 height: 30px;
 display: inline-block;
 margin-top: 100px;
 position: relative;
 border-radius: 14px;
 background: rgb(138,138,138);
 background: -webkit-linear-gradient(top,rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%,rgba(159,159,159,1) 72%,  rgba(164,164,164,1) 100%);
 background: -moz-linear-gradient(top,rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%,rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
 background: -ms-linear-gradient(top,rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%,rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
 background: -o-linear-gradient(top,rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%,rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
 box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
 line-height: 30px;
 font-style: normal;
 color: #fff;
 text-shadow: 0 1px 1px rgba(0,0,0,0.1);
 font-weight: bold;
 -webkit-box-reflect: below 5px
  -webkit-gradient(linear, left top, left bottom,
  color-stop(0.5, transparent),
  to(rgba(255, 255, 255, 0.8)));
 -moz-transition: all 1s ease-in;
 -webkit-transition: all 1s ease-in;
 -o-transition: all 1s ease-in;
 transition: all 1s ease-in;
 cursor: pointer;
}

label.attention:hover {
}
label.attention:hover:before {
 content: ""; /* &#9762; */
 font-size: 22px
}
input[type=checkbox]:checked ~ label.attention:hover:before  {
}


label i {
 position: absolute;
 top: -4px;
 right:60px;
 width: 36px;
 height: 36px;
 display: block;
 border-radius: 36px;
 background: rgb(255,255,255);
 background: -webkit-linear-gradient(top, 
  rgba(255,255,255,1) 0%, 
  rgba(252,252,252,1) 11%, 
  rgba(228,228,228,1) 50%,
  rgba(221,221,221,1) 53%,
  rgba(205,205,205,1) 97%, 
  rgba(191,191,191,1) 100%);
 background: -moz-linear-gradient(top, 
  rgba(255,255,255,1) 0%, 
  rgba(252,252,252,1) 11%,
  rgba(228,228,228,1) 50%,
  rgba(221,221,221,1) 53%, 
  rgba(205,205,205,1) 97%, 
  rgba(191,191,191,1) 100%);
 background: -o-linear-gradient(top, 
  rgba(255,255,255,1) 0%,
  rgba(252,252,252,1) 11%,
  rgba(228,228,228,1) 50%, 
  rgba(221,221,221,1) 53%, 
  rgba(205,205,205,1) 97%,
  rgba(191,191,191,1) 100%);
 background: -ms-linear-gradient(top, 
  rgba(255,255,255,1) 0%, 
  rgba(252,252,252,1) 11%,
  rgba(228,228,228,1) 50%, 
  rgba(221,221,221,1) 53%, 
  rgba(205,205,205,1) 97%, 
  rgba(191,191,191,1) 100%);
 background: linear-gradient(top, 
  rgba(255,255,255,1) 0%,
  rgba(252,252,252,1) 11%,
  rgba(228,228,228,1) 50%,
  rgba(221,221,221,1) 53%, 
  rgba(205,205,205,1) 97%, 
  rgba(191,191,191,1) 100%);
 box-shadow: inset 0 -3px 3px 0 rgba(0, 0, 0, 0.1),
    inset 0 -1px 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 0 0 rgba(0, 0, 0, 0.2);
 -webkit-transition: all 200ms ease;
 -moz-transition: all 200ms ease;
 -o-transition: all 200ms ease;
 -ms-transition: all 200ms ease;
 transition: all 200ms ease;
}

label i:before {
 content: "";
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 width: 18px;
 height: 18px;
 margin: -9px 0 0 -9px;
 border-radius: 18px;
 background: rgb(239,239,239);
 background: -webkit-linear-gradient(top, 
      rgba(239,239,239,1) 0%,
      rgba(225,225,225,1) 6%, 
      rgba(225,225,225,1) 24%,
      rgba(229,229,229,1) 94%,
      rgba(242,242,242,1) 100%);
 background: -moz-linear-gradient(top,
      rgba(239,239,239,1) 0%,
      rgba(225,225,225,1) 6%,
      rgba(225,225,225,1) 24%,
      rgba(229,229,229,1) 94%, 
      rgba(242,242,242,1) 100%);
 background: -o-linear-gradient(top,
      rgba(239,239,239,1) 0%,
      rgba(225,225,225,1) 6%,
      rgba(225,225,225,1) 24%,
      rgba(229,229,229,1) 94%,
      rgba(242,242,242,1) 100%);
 background: -ms-linear-gradient(top, 
      rgba(239,239,239,1) 0%,
      rgba(225,225,225,1) 6%, 
      rgba(225,225,225,1) 24%,
      rgba(229,229,229,1) 94%, 
      rgba(242,242,242,1) 100%);
 background: linear-gradient(top, 
      rgba(239,239,239,1) 0%,
      rgba(225,225,225,1) 6%,
      rgba(225,225,225,1) 24%,
      rgba(229,229,229,1) 94%,
      rgba(242,242,242,1) 100%);
 box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1);
}
label:hover i {
 box-shadow: inset 0 -3px 3px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 1px 0 rgba(255, 255, 255, 0.4), 0 2px 0 0 rgba(0, 0, 0, 0.3);
}
label:active i:before {
 box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.3);
}

label:before {
 content: "off";
 margin-left: 30px;
 text-transform: uppercase;
 -webkit-transition: all 200ms ease;
 -moz-transition: all 200ms ease;
 -o-transition: all 200ms ease;
 -ms-transition: all 200ms ease;
 transition: all 200ms ease;
}

label:after {
 content: "dont't turn me";
 right: 85px;
 width: 150px;
 text-transform: uppercase;
 font-size: 10px;
 font-weight: bold;
 color: #999;
 text-shadow: 0 1px 1px rgba(255,255,255,0.5), 0 -1px 1px rgba(0,0,0,0.1);
 position: absolute;
 top: 0;
}

input[type=checkbox]:checked ~ label:before {
 content: "on";
 text-transform: uppercase;
 margin-right: 30px;
 margin-left: 0;
}

input[type=checkbox]:checked ~ label:after {
 content: "too bed";
 right: -130px;
}

input[type=checkbox]:checked ~ label{
 background: rgb(141,173,51);
 background: -webkit-radial-gradient(center, ellipse cover, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
 background: -moz-radial-gradient(center, ellipse cover, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
 background: -o-radial-gradient(center, ellipse cover, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
 background: -ms-radial-gradient(center, ellipse cover, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
 background: radial-gradient(center, ellipse cover, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
}

input[type=checkbox]:checked ~ label i {
 right: -6px;
}

input {
 position: absolute;
 bottom: 5px;
 left: 50%;
 margin-left: 10px;
 opacity: 0;
  -webkit-transition: all 0.3s ease-out; 
     -moz-transition: all 0.3s ease-out; 
       -o-transition: all 0.3s ease-out; 
          transition: all 0.3s ease-out; 
} 

</style>

</head>
<body>
<div class="rss">
  
  <input type="checkbox" id="buttonThree" />
  <label for="buttonThree"> <!-- class="attention" -->
    <i></i>
  </label>
  
</div>
</body>
</html>



<html>
<head>
<style>
body{
 overflow:hidden;
}
.container{
 background:#fff;
 width:100%;
 position:absolute;
 left:45%;
}
.animatedButton{
 font-family: Arial, sans-serif;
 text-decoration: none !important;
 background-color:#f90;
 padding-left: 40px;
 padding-right: 40px;
 height: 38px;
 line-height: 38px !important;
 display: inline-block;
 border: 1px solid #f40;
 text-shadow:0px 1px 1px #000;
    box-shadow: inset 0px 1px 1px #fff, 0 1px 0px 0px #000;
 border-radius: 5px;
 -webkit-transition: all 0.2s linear;
 -moz-transition: all 0.2s linear;
 -o-transition: all 0.2s linear;
 transition: all 0.2s linear;
 color:#000;
}

.animatedButtonText{
 font-family: Arial, sans-serif;
 line-height: 38px !important;
 font-size: 18px;
 color: #fff;
 -webkit-transition: all 0.2s linear;
 -moz-transition: all 0.2s linear;
 -o-transition: all 0.2s linear;
 transition: all 0.2s linear;
}


.animatedButton:hover{
 background-color:#f50;
 -webkit-box-shadow: inset 0px 1px 1px #000, 0 1px 0px 0px #fff;
    -moz-box-shadow: inset 0px 1px 1px #000, 0 1px 0px 0px #fff;
    box-shadow: inset 0px 1px 1px #000, 0 1px 0px 0px #fff;
 text-shadow:0px -1px 1px #000;
    color:#000;
}

.animatedButton:hover .animatedButtonText{
 text-shadow:0px -1px 1px #000;
    color:#fff;
}


/*** SECOND BUTTON ***/

.animatedButton2{
 text-decoration: none !important;
 background-color:#f90;
 padding-left: 40px;
 padding-right: 40px;
 height: 38px;
 line-height: 38px !important;
 display: inline-block;
 border: 1px solid #450003;
 text-shadow:0px 1px 1px #000;
    box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #330;
 border-radius: 5px;
 -webkit-transition: all 0.15s linear;
 -moz-transition: all 0.15s linear;
 -o-transition: all 0.15s linear;
}

.animatedButtonText2{
 font-family: Oswald, Arial, sans-serif;
 line-height: 38px !important;
 font-size: 18px;
 color: #EAEAEA;
 text-align:center;
 -webkit-transition: all 0.15s linear;
 -moz-transition: all 0.15s linear;
 -o-transition: all 0.15s linear;
 transition: all 0.15s linear;
}

.animatedButton2:hover{
 background-color:#690;
 margin-top:5px;
 color:#fff;
 -webkit-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
    -moz-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
    box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
}

.animatedButton2:hover .animatedButtonText2{

 text-shadow:1px 0px 1px #fff;
    color:#000;
}

/*** THIRD BUTTON ***/

.animatedButton3{
 font-family: Oswald, Arial, sans-serif;
 text-decoration: none !important;
 background-color:#f90;
 padding-left: 20px;
 padding-right: 20px;
 height: 38px;
 line-height: 38px !important;
 display: inline-block;
 border: 1px solid #450003;
 text-shadow:0px 1px 1px #000;
 overflow: hidden;
 -webkit-box-shadow: inset 0px 1px 1px #fff;
    -moz-box-shadow: inset 0px 1px 1px #fff;
    box-shadow: inset 0px 1px 1px #fff;
   -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 -webkit-transition: all 0.2s linear;
 -moz-transition: all 0.2s linear;
 -o-transition: all 0.2s linear;
 transition: all 0.2s linear;
}

.animatedButtonText3{
 font-family: Oswald, Arial, sans-serif;
 line-height: 38px !important;
 display: block;
 font-size: 18px;
 color: #EAEAEA;
 text-align:center;
 -webkit-transition: all 0.2s linear;
 -moz-transition: all 0.2s linear;
 -o-transition: all 0.2s linear;
 transition: all 0.2s linear;
}

.animatedButton3:hover{
 background-color:#690;
 height:75px;
 -webkit-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
    -moz-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
    box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;

}

.animatedButtonExtraText3{
 font-family: Arial, sans-serif;
 font-size:12px;
 color:#fff;
 overflow: hidden;

}
</style>
</head>

<body>
<div class="container">
 <a href="#" class="animatedButton" onClick="return false;">
   <span class="animatedButtonText">HOVER Me</span>

 </a>
 <br><br><br><br>
 
 <a href="#" class="animatedButton3" onClick="return false;">
  <span class="animatedButtonText3">HOVER Me</span>
  <span class="animatedButtonExtraText3">SOME EXTRA TEXT</span>

 </a>
 
 <br><br><br><br>
 <a href="#" class="animatedButton2" onClick="return false;">
  <span class="animatedButtonText2">HOVER Me</span>

 </a>

</body>

</html>
© Copyright 2015 5 By 2 - An Associated With XMORI   
Back to Top