Advanced Search

Buttons with CSS3 and RGBA

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*ESTRUCTURA HTML*/
  2. /*
  3. <a class="large awesome">Super Awesome Button »</a>
  4. */
  5.  
  6. .awesome{
  7.     background: #222 url(/images/alert-overlay.png) repeat-x;
  8.     display: inline-block;
  9.     padding: 5px 10px 6px;
  10.     color: #fff;
  11.     text-decoration: none;
  12.     font-weight: bold;
  13.     line-height: 1;
  14.     -moz-border-radius: 5px;
  15.     -webkit-border-radius: 5px;
  16.     -moz-box-shadow: 0 1px 3px #999;
  17.     -webkit-box-shadow: 0 1px 3px #999;
  18.     text-shadow: 0 -1px 1px #222;
  19.     border-bottom: 1px solid #222;
  20.     position: relative;
  21.     cursor: pointer;
  22.     -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  23.     -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  24.     text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  25.     border-bottom: 1px solid rgba(0,0,0,0.25);
  26. }
  27.  
  28. /* Sizes ---------- */
  29. .small.awesome {font-size: 11px;}
  30. .medium.awesome {font-size: 13px;}
  31. .large.awesome {font-size: 14px; padding: 8px 14px 9px;}
  32.  
  33. /* Colors ---------- */
  34. .blue.awesome {background-color: #2daebf;}
  35. .red.awesome {background-color: #e33100;}
  36. .magenta.awesome {background-color: #a9014b;}
  37. .orange.awesome {background-color: #ff5c00;}
  38. .yellow.awesome {background-color: #ffb515;}

URL: http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.