Simple Css 3 buttons

I know that there are many other ways to do this out there, but I just had to come up with my own, that pleased me visu­ally — you know how it is…

The but­tons can be found here: http://media.dkpn.jp/css/css3-buttons-01/ (CSS)
They should work with Fire­fox and Webkit based browsers (Safari, Chrome).

The basic styling looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
a._but {text-decoration: none; out­line: none;}
a._but:focus {–moz–outline-style: none;}
._but {
back­ground: #ccc;
bor­der:1px solid #d9d9d8;
padding:7px 10px;
font-size:14px;
text-shadow: 0px 1px 0px #fff;
font-weight: bold;
color:#000;
box-shadow: 0px 1px 0px #666;
cur­sor: pointer;
white-space:nowrap;
}

You’ll notice the pseudo class :focus, which tells Fire­fox not to add dots around a clicked ele­ment (as found here).

The other “new” ele­ments are the text-shadow prop­erty, which seems to work with­out any pre­fix on my ver­sions of Fire­fox (3.6.12) and Chrome (5.0.375.70)/Safari(5.0.1), and the box-shadow one that just doesn’t work for now…
The white-space part if for inline links, to avoid them being cut in two.

The styling for Gecko-based browsers (Firefox):

1
2
3
4
5
6
7
back­ground: –moz-linear-gradient(
   cen­ter bot­tom,
   rgb(224,224,224) 26%,
   rgb(238,238,238) 63%
);
–moz-border-radius: 10px;
–moz-box-shadow: 0px 1px 0px #666;

and Webkit-based browsers (Chrome/Safari/Webkit):

1
2
3
4
5
6
7
8
9
back­ground: –webkit-gradient(
   lin­ear,
   left bot­tom,
   left top,
   color-stop(0.26, rgb(224,224,224)),
   color-stop(0.63, rgb(238,238,238))
);
–webkit-border-radius: 10px;
–webkit-box-shadow: 0px 1px 0px #666;

Rounded cor­ners, a sub­tle gra­di­ent for the back­ground, and a 1px drop shadow. I must con­fess that I used this tool to grab the cor­rect rgb val­ues. Would love hex col­ors + alpha…

Pretty straight­for­ward. I added two pseudo classes, hover and active for the but­ton states, using the same kind of prop­er­ties. The only part that might need atten­tion would be this one maybe:

1
2
–moz-box-shadow: 0px –1px 0px #666;
–webkit-box-shadow: 0px –1px 0px #666;

The neg­a­tive value of the box shadow gen­er­ates an inner shadow, which I used to give the impres­sion the but­ton is pressed.

I guess you could just then pile up ven­dor pre­fixes as you want…

2 Comments

  1. bjoern
    Posted July 14, 2010 at 12:40 am | Permalink

    jo!!! i like your buttons :)

  2. Jérôme
    Posted August 8, 2010 at 4:48 am | Permalink

    Thank you man :)

Post a Comment

Your email is never shared. Required fields are marked *

*
*