VISSZA
MENÜ
TOVÁBBA szövegben elhelyezett linkeket (<a...>...</a> elemeket) osztályba sorolva közösen formázhatjuk. Beállíthatjuk a háttérszínt, feliratszínt. Adhatunk hozzá keretet, árnyékolhatjuk és lekerekíthetjük sarkait.
A második példában a hirtelen színátmenetet a box-shadow tulajdonság segítségével simítjuk. Ennek leírása megtalálható a CSS3 animáció fejezetben.
1. Példa:
Forráskód
<style>
p {line-height:1.8;}
.Gomb1 {padding: 2px 12px;
background: #004400;
color: #ffffff;
text-decoration:none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px; }
.Gomb2 {
padding: 2px 12px;background: #004400;
color: #ffffff;text-decoration:none;
border: solid 1px #000000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 #88ff88, 0 1px 1px #000000;
-moz-box-shadow: inset 0 1px 0 #88ff88, 0 1px 1px #000000;
-ms-box-shadow: inset 0 1px 0 #88ff88, 0 1px 1px #000000;
-o-box-shadow: inset 0 1px 0 #88ff88, 0 1px 1px #000000;
box-shadow: inset 0 1px 0 #88ff88, 0 1px 1px #000000;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s; }
.Gomb2:hover {
background: #008800; border: solid 1px #000000;
text-decoration: none;}
.Gomb2:active {
background: #008800; border: solid 1px #000000;
-webkit-box-shadow: inset 0 -1px 0 #338833, 0 1px 1px #000000;
-moz-box-shadow: inset 0 -1px 0 #338833, 0 1px 1px #000000;
-ms-box-shadow: inset 0 -1px 0 #338833, 0 1px 1px #000000;
-o-box-shadow: inset 0 -1px 0 #338833, 0 1px 1px #000000;
box-shadow: inset 0 -1px 0 #338833, 0 1px 1px #000000;}
</style>
….
<body>
<p> Ez egy szövegbe integrált link
<a href="#" class="Gomb1">Gomb 1</a>, egy inline elem.<br>
Ez egy szövegbe integrált link
<a href="#" class="Gomb2">Gomb 2</a>, egy inline elem.</p>
</body>
Eredmény*
* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_inline_link_btn_01.html