Animēta poga - Forums





 
Lappuse 1 no 11
Forums » UCOZ » JS/CSS » Animēta poga (CSS3)
Animēta poga
lavalairPievienots: Otrdiena, 19.07.2011, 21:30:10
Ieraksti:
Amats: Dzēstās
Pašlaik:







HTML:

Code
<a href="#" class="btn"><span>Uzspied mani!</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);    
}


 
Forums » UCOZ » JS/CSS » Animēta poga (CSS3)
Lappuse 1 no 11
Meklēšana:
Foruma statistika
Jaunākās tēmas Populārākās tēmas Aktīvākie lietotāji Jaunākie lietotāji
* Nerāda filmu (0)
* www.kinofilmnet.lv - vīruss (0)
* www.kinofilmnet.lv - vīruss (0)
* Skaistule un briesmonis (0)
* Galigi garam (3)
* Ctrl + V (60)
* Ir / Nav spēle (78)
* Jautājumu spēle! (67)
* Ctrl + V (60)
* Dizains (16)
* Kādu OS tu lieto? (14)
* Neaceros paroli. (14)
* More (111 ieraksti)
* SMILE (70 ieraksti)
* palulu13 (44 ieraksti)
* CsDeva (41 ieraksti)
* chaa (30 ieraksti)
* Burvislv (28 ieraksti)
* adazhanTus (03.12.2016 21:44:57)
* FlamesongDyebytots (01.12.2016 23:29:58)
* Bettyerove (30.10.2016 06:52:22)
* Benniecef (24.10.2016 03:52:02)
* ingarsnarbs (26.07.2016 19:23:53)
* sauluks (19.07.2016 10:44:45)