Schicke CSS3-Buttons

Mit CSS3 lassen sich auf sehr einfache Weise, Elemente gestalten, was üblicherweise nur mit Grafiken zu bewerkstelligen war. Leider müssen noch Prefixes für die einzelnen Browsertypen verwendet werden (-moz, -webkit, -o). Hier z.B. mal Buttons, ganz ohne Grafiken oder "dirty tricks" wie verschachtelte Tags.

.btn {
  position:relative;

  background:-webkit-gradient(linear, left top, left bottom, from(#7CD357), to(#5CA33E));
  background:-moz-linear-gradient(center top, #7CD357, #5CA33E);

  background-color:#5CA33E;

  border:1px solid #5CA33E;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;

  -moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  -webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  box-shadow:0 1px 1px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255, 255, 255, 0.9);

  font:bold 14px/14px sans-serif;
  color:#fff;
  text-shadow:1px 1px 0 rgba(0, 0, 0, 0.3);
  text-decoration:none;
  display:inline;

  padding:8px 16px;
  margin:0;
  cursor:pointer;
}

.btn:hover {
  background:-moz-linear-gradient(center top, #5CA33E, #7CD357);
  background:-webkit-gradient(linear, left top, left bottom, from(#5CA33E), to(#7CD357));
}

.btn:active  {
  top:1px;
}
 
  <input class="btn" type="submit" value="Submit" />
  <button class="btn">Button</button>
  <a class="btn" href="#">Link</a>
  <div class="btn">Div</div>
  <span class="btn">Span</span>

css

November 2010 | Permalink | Feedback