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?
Kanał ATOM
