Omega needs awesome buttons

I think this should be in the module space instead via Button Style or something similar.

I don't think this should be added to the core theme, but if you want it in your sub-theme you can do this in your global.css to add it:

/*          Buttons            */

button,
input[type="reset"],
input[type="submit"],
input[type="button"],
.node-links ul li a, .comment-links ul li a {
  display: inline-block;
  white-space: nowrap;
  background-color: #ccc;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
  background-image: -webkit-linear-gradient(top, #eee, #ccc);
  background-image: -moz-linear-gradient(top, #eee, #ccc);
  background-image: -ms-linear-gradient(top, #eee, #ccc);
  background-image: -o-linear-gradient(top, #eee, #ccc);
  background-image: linear-gradient(top, #eee, #ccc);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
  border: 1px solid #777;
  padding: 0 1.5em;
  margin: 0.5em;
  font: bold 0.8em/2em Arial, Helvetica;
  text-decoration: none;
  color: #333;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  -moz-border-radius: .2em;
  -webkit-border-radius: .2em;
  border-radius: .2em;
  -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
  -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
  box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}

button:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.node-links ul li a:hover, .comment-links ul li a:hover {
	background-color: #ddd;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
  background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
  background-image: -moz-linear-gradient(top, #fafafa, #ddd);
  background-image: -ms-linear-gradient(top, #fafafa, #ddd);
  background-image: -o-linear-gradient(top, #fafafa, #ddd);
  background-image: linear-gradient(top, #fafafa, #ddd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
  }

button:active,
input[type="reset"]:active,
input[type="submit"]:active,
input[type="button"]:active,
.node-links ul li a:active, .comment-links ul li a:active {
	-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
  -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
  box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
  position: relative;
  top: 1px; }

button:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
.node-links ul li a:focus, .comment-links ul li a:focus {
	outline: 0;
   background: #fafafa; }
   
button:before,
input[type="reset"]:before,
input[type="submit"]:before,
input[type="button"]:before,
.node-links ul li a:before, .comment-links ul li a:before {
	background: #ccc;
  background: rgba(0,0,0,.1);
  float: left;
  width: 1em;
  text-align: center;
  font-size: 1.5em;
  margin: 0 1em 0 -1em;
  padding: 0 .2em;
  -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
  -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
  box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
  -moz-border-radius: .15em 0 0 .15em;
  -webkit-border-radius: .15em 0 0 .15em;
  border-radius: .15em 0 0 .15em; }    

button[disabled], button[disabled]:hover, button.disabled, button.disabled:hover,
input[type="reset"].disabled,
input[type="submit"].disabled,
input[type="button"].disabled,
.node-links ul li a.disabled, .comment-links ul li a.disabled 
{
  background: #eee;
  color: #aaa;
  border-color: #aaa;
  cursor: default;
  text-shadow: none;
  position: static;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* Some pretty icons to use on some buttons */
/* Hexadecimal entities for the icons */
.add:before, li.comment-add a:before, li.comment-reply a:before {content: "\271A";}
.edit:before, li.comment-edit a:before {content: "\270E";}
.delete:before, li.comment-delete a:before {content: "\2718";}
.save:before, input[type="submit"]:before {content: "\2714";}
.email:before {content: "\2709";}
.like:before {content: "\2764";}
.next:before {content: "\279C";}
.star:before {content: "\2605";}
.spark:before {content: "\2737";}
.play:before {content: "\25B6";}

Thanks for this. Allow me a question;

I want to add call-to-action box in my sidebar. I have created a block. How do I convert a mailto: into a button? In other words; how do I apply the class "Button" to the link? Got that sorted.

Now, to get it to show an icon with .email:before, that's another thing ...

Update: I figured it out, and here's how for other happy css amateurs like me:

1. Here's how I added a class to a link: in my CKEditor, I marked the text to create a hyperlink. In the advanced settings, write "Button" (without quotes) in the Stylesheet classes field. Save it. You will now see a button instead of a link.

2. To add the icon, same place add the type (add, email, like, next, star etc.) after the 'Button' in the same field and save.

3. Now, I chose to shorten my global.css a bit and add the bus css into it's own file. Remember to update your [theme].info file.

4. If you like to customize a single button (e.g. in a call-to-action box), copy the necessary css into its own section, as not to confuse matters.

- Christian

Christian,

I am sorry I didn't see your question in time to help, but glad you got it sorted!

Did my css help you get these buttons going? Can we see your site to see how it is coming along?

Not quite there yet. Still in development. I'd rather wait with posting the link, until completed (or nearly). I promise to do that. Thanks for your interest.

And yes; your css got me going. Thank you for that too. :)

- Christian

Just to inform that if you use above css code in #2 Fivestar is not working.

the conflict in fivestar is because of this line in the css
.star:before {content: "\2605";}

the class star is used in fivestar's markup. Remove that line or rename the .star class and it works.

@ #2, love that button code Shane, thx!

Just use boostrap buttons. They look great, work on all browsers and versions of browsers (as much as is possible) and are done entirely in css. I just checked and downloaded the buttons component and added it to a buttons.css file then added that css to my .info file.

http://twitter.github.com/bootstrap/customize.html