#basket
New messages Members Forum rules Search RSS
  • Page 1 of 1
  • 1
Forum » For webmasters » HTML / CSS / Javascript » Animated CSS3 button
Animated CSS3 button
adminDate: Tuesday, 21.06.2011, 19:09 | Message # 1
Group: Verified
Posts: 187
Awards: 8
Status: Offline

HTML:

Code
<a href="#" class="btn"><span>Press this!</span></a>

CSS:

Code
.btn {
        display: inline-block;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        -webkit-box-shadow:
          0 8px 0 #1a74a1,
          0 15px 20px rgba(0,0,0,.35);
        -moz-box-shadow:
          0 8px 0 #1a74a1,
          0 15px 20px rgba(0,0,0,.35);
        box-shadow:
          0 8px 0 #1a74a1,
          0 15px 20px rgba(0,0,0,.35);
        -webkit-transition: -webkit-box-shadow .2s ease-in-out;
        -moz-transition: -moz-box-shadow .2s ease-in-out;
        -o-transition: -o-box-shadow .2s ease-in-out;
        transition: box-shadow .2s ease-in-out;
}

.btn span {
        display: inline-block;
        padding: 10px  20px;
        font-family: "cooper-black-std-1", "cooper-black-std-2", Helvetica, Arial, sans-serif;
        line-height: 1;
        text-shadow: 0 -1px 1px rgba(19,65,88,.8);
        background: #3194c6;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3194c6), to(#5bacd6));
        background: -moz-linear-gradient(#3194c6, #5bacd6);
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
        -moz-box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
        box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
        -webkit-transition: -webkit-transform .2s ease-in-out;
        -moz-transition: -moz-transform .2s ease-in-out;
        -o-transition: -o-transform .2s ease-in-out;
        transition: transform .2s ease-in-out;
}
.btn:active {
     -webkit-box-shadow:
       0 8px 0 #1a74a1,
       0 12px 10px rgba(0,0,0,.3);
     -moz-box-shadow:
       0 8px 0 #1a74a1,
       0 12px 10px rgba(0,0,0,.3);
     box-shadow:
       0 8px 0 #1a74a1,
       0 12px 10px rgba(0,0,0,.3);
}

.btn:active span {
     -webkit-transform: translate(0, 4px);
     -moz-transform: translate(0, 4px);
     -o-transform: translate(0, 4px);
     transform: translate(0, 4px);
}

 
SirDarknight(Tonmoy)Date: Wednesday, 22.06.2011, 13:08 | Message # 2
Group: Verified
Posts: 167
Awards: 6
Status: Offline
WoW

Please Give Me A Reputation or Award If My Post Helps You
 
Forum » For webmasters » HTML / CSS / Javascript » Animated CSS3 button
  • Page 1 of 1
  • 1
Search: