CSS - Zaokrąglony przycisk z efektem przezroczystości

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

<a class="pushButton">EFCIA</a>

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