4

html5

css3

Przycisk

html5 css3

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 {
float: left;
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;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7),
0 -1px 0 rgba(64, 38, 5, 0.9);

-moz-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 #ccc;

-webkit-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 #ccc;

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 #ccc;

-webkit-transition: background 0.2s ease-out;
}

Następnie dodamy efekt po kliknięciu na przycisk.

a.przycisk:active {
background: #f6a000;
position: relative;
top: 5px;
border: 1px solid #702d00;

-moz-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 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;

-webkit-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 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;

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 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
}

Efekt

comments powered by Disqus

Do góry