W wersji CSS3 otrzymujemy dostęp do nowych znaczników, dzięki którym bez konieczności tworzenia osobnej grafiki możemy przygotować przycisk o zaokrąglonych narożnikach.
Przycisk w dokumencie HTML5
<!DOCTYPE html>
<html>
<head>
<title>Przycisk w CSS#</title>
</head>
<body>
<section>
<a class="przycisk" href="#">Przycisk</a>
</section>
</body>
</html>Przycisk w dokumencie CSS3
W pliku ze stylem zdefiniujemy wygląd naszego przycisku. W tym przykładzie uzyskamy efekt 3d.
a.przycisk {
display: block;
margin: 0 auto 7px auto;
cursor: pointer;
width: 140px;
padding: 20px 25px;
background-color: #a5d5ee;
color: #14658f;
text-transform: uppercase;
font-weight: bold;
text-align: center;
text-decoration: none;
border: 1px solid #2f7ea7;
border-radius: 7px;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(64, 38, 5, 0.9);
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #50b0e2, 0 6px 0 #2f7ea7, 0 10px 2px #c8c8c8;
transition: background 0.2s ease-out;
} Następnie dodamy efekt po kliknięciu na przycisk.
a.przycisk:active {
background: #7dc6ec;
position: relative;
top: 3px;
background-color: #50b0e2;
border: 1px solid #206a90;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #50b0e2, 0 4px 0 #206a90, 0 6px 2px #c8c8c8;
}