Expose

5By2.tk


<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>
© Copyright 2015 5 By 2 - An Associated With XMORI   
Back to Top