Změna velikosti písma

Drobečková navigace

CSS blog > Buttony s krátkým textem

Buttony s krátkým textem



Buttony mají nastaveny jako pozadí průhledné obrázky, proto je v rámci ukázky nastaven bílý podklad pro celý div s buttony, aby byly vidět efekty :)

HTML

<div id="buttonyUvod">
 <a class="buttonUvod buttonDum" title="" href="#"><span>Lorem ipsum</span></a>
  <a class="buttonUvod buttonWmn" title="" href="#"><span>Lorem ipsum</span></a>
  <a class="buttonUvod buttonPenize" title="" href="#"><span>Lorem ipsum</span></a>
</div>

CSS

#buttonyUvod {
    width:100%;
    /* je nutné změnit výšku podle součtu šířky + paddingu buttonů */
    height: 150px;
    clear:both;
    margin-bottom:10px;
}

a.buttonUvod {
    display:block;
    float:left;
    /* šířka podle šířky obrázku */
    width:200px;
    /* výška podle výšky obrázku */
    height:138px;
    background-color:transparent;
    background-repeat:no-repeat;
    background-attachment: scroll;
    margin-left:20px;
    position:relative;
    /* barvu písma změnit podle potřeb */
    color:#FFFFFF;
    /* nastavení stínu, lze zaměnit za rámeček. Pokud bude rámeček, je nutné snížit margin-left */
    -webkit-box-shadow:1px 2px 8px 1px #999999;
    -moz-box-shadow:1px 2px 8px 1px #999999;
    -ms-box-shadow:1px 2px 8px 1px #999999;
    -o-box-shadow:1px 2px 8px 1px #999999;
    box-shadow:1px 2px 8px 1px #999999;
}
a.buttonUvod:first-child {
    margin-left:0;
}
a.buttonUvod span {
    display:block;
    width:100%;
    padding-top:5px;
    padding-bottom:5px;
    text-align:center;
    font-size:1.2em;
    
    /* barva pozadí linky */
    background-color:#000000;
    background-color:rgba(0,0,0,0.5);
    position:absolute;
    bottom:0px;
    left:0px;
    font-weight:bold;
    filter:alpha(opacity=80);
    text-decoration:none;
}
/* nastavení efektu na hover, focus */
a.buttonUvod:hover{
    color: red;
    filter:alpha(opacity=70);
}
a.buttonUvod:focus {
    -webkit-box-shadow:1px 2px 8px 1px #999999 inset;
    -moz-box-shadow:1px 2px 8px 1px #999999 inset;
    -ms-box-shadow:1px 2px 8px 1px #999999 inset;
    -o-box-shadow:1px 2px 8px 1px #999999 inset;
    box-shadow:1px 2px 8px 1px #999999 inset;
}
a.buttonDum {
    background-image: url('image.php?nid=11524&oid=3182286');
}
a.buttonWmn {
    background-image: url('image.php?nid=11524&oid=3182292');
}
a.buttonPenize {
    background-image: url('image.php?nid=11524&oid=3182295');
}

Ukázka je připravena pro buttony s šířkou 200px a výškou 138px. Buttony doporučuju vždy přizpůsobit vzhledu stránek (border-radius, stíny, barvy pole pro text, ..). Výše uvedená ukázka odpovídá rozvržení 910px s levým/pravým sloupcem. Vždy je potřeba upravit šířku a výšku buttonů podle připravených obrázků a výšku celého divu pro buttony.

Čeho se vyvarovat & na co si dávat pozor

  • Texty v buttonech tvořte přes HTML, nikoliv obrázkem
  • stíny tvořte přes CSS
  • "Kulaté" rohy tvořte přes CSS
  • Pokud to požadavky zákazníka dovolí, tak jakékoliv pruhy v buttonech dělejte přes html a přes CSS
  • Jakékoliv texty a jejich napozicování řešte přes <span> </span>

Komentáře


  • 5. 4. 2013 1:15
    Jana Kacetlová Mackrlová
    hover u img

    Jak udělat hover aby se změnil celý img a ne jen text//zprůhlednění nebo změna barvy na černobílé// díky


Kalendář akcí

Po Út St Čt So Ne
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 1 2 3 4