Expose

5By2.tk


<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