How do I get the CSS of this element?

Question

• http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html

Is you go to this website. Scroll down to "Using the Button Element". Then the first black button called "Super Awesome button"

What is the full CSS for this? Just one class. I want all the attributes of this.

Is there any way to see it , just one class? In firebug it has a lot of things...and I can't put them together.

Answer 1

There's a "Read the blog post »" link right on the top that explains how to do it.

Answer 2

If the Firebug output is too much for you, you could read the blog post that is linked on top that explains how to create these buttons.

Answer 3

The CSS for these buttons are both in the head of the page and in an external stylesheet called global.css. Most of the visual changes to this button and all the buttons are the page are in the styles in the head of the page and if you want to duplicate this functionality you would need to copy all the css from the head of this page as well as the .png overlay image that causes the button reflection into your page. Make sure that you mention the original author of the css in your documents though, give credit where it is due.

Hope that helps

Answer 4

You should probably take the css from http://zurb.com/stylesheets/layouts/default.css

Then you should use this css on your page

After that you should create the button:

Super Awesome Button »

That's it

Answer 5

Yo can do it in firebug:

The button element has a class, but other elements has also influence on the visual look of the button. Here are all css attributes from one button (by the Firebug):

.large.awesome, .large.awesome:visited { font-size:14px; padding:8px 14px 9px; }

.awesome, .awesome:visited, .medium.awesome, .medium.awesome:visited { font-weight:bold; line-height:1; text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25); }

.awesome, .awesome:visited { -moz-border-radius:5px 5px 5px 5px; -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.5); background:url("/images/alert-overlay.png") repeat-x scroll 0 0 #222222; border-bottom:1px solid rgba(0, 0, 0, 0.25); color:#FFFFFF; cursor:pointer; display:inline-block; position:relative; text-decoration:none; }

a { outline:0 none; }

h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, img, small, strike, sub, sup, tt, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { border:0 none; font-family:inherit; font-style:normal; margin:0; text-align:left; }