Ansprechende Buttons mit CSS3 erstellen

Hier zeige ich wie man mit CSS3, ganz ohne Zuhilfenahme von Grafiken, mit nur wenigen Zeilen Code, ansprechende Buttons erzeugen kann.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” />
<title>CSS Buttons</title>

<style>
  li
  {
    list-style:none;
    padding-top:10px;
    padding-bottom:10px;
  }

  .button, .button:visited
  {
    background: #222 url(overlay.png) repeat-x;
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer
  }

  .button:hover { background-color: #111; color: #fff; }
  .button:active { top: 1px; }
  .small.button, .small.button:visited { font-size: 11px}

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

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

  .super.button, .super.button:visited
  {
    font-size: 34px;
    padding: 8px 14px 9px;
  }

  .orange.button, .orange.button:visited {background-color: #ff5c00;}
  .orange.button:hover {background-color: #d45500;}
  .blue.button, .blue.button:visited {background-color: #2981e4;}
  .blue.button:hover {background-color: #2575cf;}
</style>

</head>
<body>

  <ul>
    <li><a class=”super button blue”>Blue superbig Button</a></li>
    <li><a class=”large button orange”>Orange large Button</a></li>
    <li><a class=”medium button orange”>Orange medium Button</a></li>
    <li><a class=”small button orange”>Orange small Button</a></li>
  </ul>

</body>
</html>

Über Enrico S.

Programmierer, Webdesigner, Grafiker, Blogger, Screencaster, Arduino- und eMobility Enthusiast.

Kommentare geschlossen.