WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

Inline link-gombok



A 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