Autor wpisu: batman, dodany: 12.07.2011 08:00, tagi: css
Dzięki popularyzacji nowoczesnych przeglądarek, mamy możliwość rezygnacji ze stosowania plików graficznych i w ich miejscu wykorzystywania czystego CSS. Jednym z elementów strony, który można w całości wykonać przy pomocy CSS, jest przycisk.
Od strony HTML kod jest banalny.
<a href="#" class="button">Kliknij mnie</a>
CSS również nie jest zbyt skomplikowany.
.button { background-color: #efefef; border: 1px solid #bbbbbb; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; -moz-box-shadow: 2px 2px 3px #cccccc; -webkit-box-shadow: 2px 2px 3px #cccccc; box-shadow: 2px 2px 3px #cccccc; text-decoration: none; color: #3d3d3d; font-family: Calibri, Verdana, Arial, sans-serif; font-size: 18px; outline: none; padding: 3px 10px; } .button:active { -moz-box-shadow: 2px 2px 3px #cccccc inset; -webkit-box-shadow: 2px 2px 3px #cccccc inset; box-shadow: 2px 2px 3px #cccccc inset; }
I już. W efekcie uzyskamy dwustanowy przycisk działający we wszystkich nowoczesnych przeglądarkach (również w IE9), który wygląda następująco.
Prawda, że proste?