Cmlap News, articles Rounded gradient button only with css3

Rounded gradient button only with css3

Hello!

This button is made only with css3!

The newest browsers support the used practices.

You can maybe start try with them.

The design is on a simple span element.

Html code:

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

The style code:

<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 parameters:

1: left offset
2: top offset
3: blur offset
4: spread offset
specify rgba color: (r,g,b,a) where "a" the alpha channel [transparency]
at the beginning [0. position] use the "inset" keyword for shadow within the element.

border-radius parameters:

one side of the rounded corner bounding box (in this case 8*8)

All browsers set the background gradient unique, but always must be set the starting and finish colors, and the gradient starting position.

The standard rule is without browser specific prefix (e.g: -moz-)  (preferred), hopefully it will work shortly in all.


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