Button z zaokrąglonymi rogami, w całości uzyskany za pomocą CSS. Najlepiej prezentuje się na ciemnym tle. Wstawienie w HTML to zaledwie jedna linijka!
Źródło:
http://cssdeck.com/labs/3d-push-button
HTML
EFCIA
CSS
@import url(http://fonts.googleapis.com/css?family=BenchNine)
body
font-family: "BenchNine", sans-serif
background-image: url(http://subtlepatterns.com/patterns/classy_fabric.png)
.pushButton
display: block
color: #fff
cursor: pointer
width: 120px
height: 45px
position: absolute
top: 50%
left: 50%
margin-top: -(@height/2)
margin-left: -(@width/2)
line-height: @height
text-align: center
border-radius: 5px
box-shadow: 0 1px 0 0 rgba(255, 255, 255, .2) inset, 1px 1px 10px 0 rgba(0, 0, 0, .5), -1px -1px 0 0 rgba(0, 0, 0, .4) inset
background: linear-gradient(top, #37352e, #2e2d26)
background: -moz-linear-gradient(top, #37352e, #2e2d26)
text-shadow: 0 1px rgba(0,0,0,.5)
transition: all 10ms
.pushButton:active
background: linear-gradient(top, #2c2a23, #323028)
box-shadow: 0 -1px 0 0 rgba(255, 255, 255, .2) inset, 0 1px 10px 0 rgba(0, 0, 0, .4) inset
color: #686662
opacity: .9
text-shadow: 0 -1px rgba(0,0,0,.5)
0 komentarze:
Prześlij komentarz