Cmlap Hírek, cikkek Lekerekített, színátmenetes gomb létrehozása csak css3-al

Lekerekített, színátmenetes gomb létrehozása csak css3-al

Hello!

Ezt a gombot kizárólag css3-al hoztuk létre!

A legfrissebb böngészõk már támogatják az itt felhasznált praktikákat. Érdemes lassacskán kísérletezni velük.

Egy egyszerû <span> elemre húzzuk a dizájnt.

Html kód:

<span class="bigbutton">Hello!</span>

A stílus kód:

<style type="text/css">
.bigbutton {
    display:block;
    width:160px;
    height:40px;
    line-height:40px;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#96008d), color-stop(100%,#ff0fb3));
    background-image: -webkit-linear-gradient(top, #96008d, #ff0fb3);
    background-image: -moz-linear-gradient(top, #96008d, #ff0fb3);
    background-image: -ms-linear-gradient(top, #96008d, #ff0fb3);
    background-image: -o-linear-gradient(top, #96008d, #ff0fb3);
    background-image: linear-gradient(top, #96008d, #ff0fb3);
    border:1px solid #cccccc;
    box-shadow: inset 0px 0px 5px #eeeeee;
    -moz-box-shadow: inset 0px 0px 5px #eeeeee;
    -webkit-box-shadow: inset 0px 0px 5px #eeeeee;
    border-radius:8px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.5);
    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.5);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.5);
    color:#ffffff;
    font-family:Impact;
    font-size:22px;
    text-align:center;
    cursor:pointer;
}
</style>

box-shadow paraméterei:

1: left offset
2: top offset
3: blur offset
4: spread offset
rgba színmegadásnál: (r,g,b,a) ahol a az alfa csatorna [átlátszóság]
az elején [0. pozíció] inset kulcsszó megadásával az árnyék az elemen belülre fog esni!

border-radius paraméterei:

a lekerekített sarkot befoglaló négyzet oldala (jelen esetben 8*8)

a háttérnek beállított színátmenet minden böngészõben egyedi, de valamennyinél a kiinduló és befejezõ színt meg kell adni illetve a kezdõ pozíciót

a böngészõ specifikus elõtag (pl: -moz-) nélküli definíciók a szabványosak (ajánlottak), remélhetõleg hamarosan mindben mûködni fognak


Ha tetszett vagy hasznosnak talltad, krlek oszd meg!
Author / szerz:
Hozzszlsok
Vlasszon nyelvet!
Keress a tartalomban
Kattintson ide az adatok elkldshez!