CSS3 Buttons

Tutorials, Webdesign•on Februar 11th, 2011•2 Kommentare

Cascading Style Sheets, genannt CSS werden in html und xml Templates verwendet. Dabei geht es um Proportionen und Schriften auf einer Homepage. Die CSS Versionen 1 und 2 wurden bisher eingesetzt doch jetzt kommt vom W3C (World Wide Web Consortium) der Level 3 und wird im Moment zumindest in Teilen von verschiedenen Browsern unterstützt. Die Möglichkeiten die CSS3 bietet sind groß und umfangreich. Hier zeigen wir ein Tutorial zur Darstellung von Buttons mit CSS3.

CSS3 Button Tutorial

Demo Download

Buttons ohne Grafiken und mit Java Script für den Font

Die CSS Datei für einen Button:

a.button-black{
float:left;
background-color: #000;
background-image: -moz-linear-gradient(#999, #000);
border: 1px solid #000;
color: #fff;
font-family: 'Arial',Helvetica,sans-serif;
font-size: 17px;
font-weight: bold;
letter-spacing: 0;
margin: 10px;
padding: 8px;
text-decoration: none;
text-shadow: 1px 1px 0 #000;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}
a.button-black:hover{
background-color: #999;
text-decoration:none;
background-image: -moz-linear-gradient(#000, #999);
-webkit-box-shadow: 3px 2px 5px #aaa;
-moz-box-shadow: 3px 2px 5px #aaa;
}

Die index.html oder .php

Die Buttons können mit einen einfachen code, in das Template oder in einen WYSIWYG-Editor (WebsiteBaker) eingefügt werden. Hierfür schreibt man:

<a class="button-black" href="#">button text</a>

Die CSS Datei für alle Buttons:


/************************************************************

1.) Button Blue

*************************************************************/

a.button-blue{
float:left;
background-color: #03D5F6;
background-image: -moz-linear-gradient(#03D5F6, #118FCC);
border: 1px solid #118FCC;
color: #fff;
font-family: 'Arial',Helvetica,sans-serif;
font-size: 17px;
font-weight: bold;
letter-spacing: 0;
margin: 10px;
padding: 8px;
text-decoration: none;
text-shadow: 1px 1px 0 #118FCC;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;

}

a.button-blue:hover{
text-decoration:none;
background-color: #118FCC;
background-image: -moz-linear-gradient(#118FCC, #03D5F6);
-webkit-box-shadow: 3px 2px 5px #aaa;
-moz-box-shadow: 3px 2px 5px #aaa;

}

/************************************************************

2.) Button orange

*************************************************************/

a.button-orange{
float:left;
background-color: #FFCC5F;
background-image: -moz-linear-gradient(#FFCC5F, #E97B24);
border: 1px solid #E97B24;
color: #fff;
font-family: 'Arial',Helvetica,sans-serif;
font-size: 17px;
font-weight: bold;
letter-spacing: 0;
margin: 10px;
padding: 8px;
text-decoration: none;
text-shadow: 1px 1px 0 #E97B24;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;

}

a.button-orange:hover{
text-decoration:none;
background-color: #E97B24;
background-image: -moz-linear-gradient(#E97B24, #FFCC5F);
-webkit-box-shadow: 3px 2px 5px #aaa;
-moz-box-shadow: 3px 2px 5px #aaa;

}

/************************************************************

3.) Button green

*************************************************************/

a.button-green{
float:left;
background-color: #88DB17;
background-image: -moz-linear-gradient(#88DB17, #3FA005);
border: 1px solid #3FA005;
color: #fff;
font-family: 'Arial',Helvetica,sans-serif;
font-size: 17px;
font-weight: bold;
letter-spacing: 0;
margin: 10px;
padding: 8px;
text-decoration: none;
text-shadow: 1px 1px 0 #3FA005;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;

}

a.button-green:hover{
background-color: #3FA005;
text-decoration:none;
background-image: -moz-linear-gradient(#3FA005, #88DB17);
-webkit-box-shadow: 3px 2px 5px #aaa;
-moz-box-shadow: 3px 2px 5px #aaa;

}

/************************************************************

4.) Button grey

*************************************************************/

a.button-grey{
float:left;
background-color: #4D6E81;
background-image: -moz-linear-gradient(#74ABC0, #4D6E81);
border: 1px solid #4D6E81;
color: #fff;
font-family: 'Arial',Helvetica,sans-serif;
font-size: 17px;
font-weight: bold;
letter-spacing: 0;
margin: 10px;
padding: 8px;
text-decoration: none;
text-shadow: 1px 1px 0 #4D6E81;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;

}

a.button-grey:hover{
background-color: #74ABC0;
text-decoration:none;
background-image: -moz-linear-gradient(#4D6E81, #74ABC0);
-webkit-box-shadow: 3px 2px 5px #aaa;
-moz-box-shadow: 3px 2px 5px #aaa;

}

/************************************************************

5.) Button lila

*************************************************************/

a.button-lila{
float:left;
background-color: #AA98D4;
background-image: -moz-linear-gradient(#AA98D4, #4F568D);
border: 1px solid #4F568D;
color: #fff;
font-family: 'Arial',Helvetica,sans-serif;
font-size: 17px;
font-weight: bold;
letter-spacing: 0;
margin: 10px;
padding: 8px;
text-decoration: none;
text-shadow: 1px 1px 0 #4F568D;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;

}

a.button-lila:hover{
background-color: #4F568D;
text-decoration:none;
background-image: -moz-linear-gradient(#4F568D, #AA98D4);
-webkit-box-shadow: 3px 2px 5px #aaa;
-moz-box-shadow: 3px 2px 5px #aaa;

}

/************************************************************

6.) Button violett

*************************************************************/

a.button-violett{
float:left;
background-color: #D490C1;
background-image: -moz-linear-gradient(#D490C1, #A5527E);
border: 1px solid #A5527E;
color: #fff;
font-family: 'Arial',Helvetica,sans-serif;
font-size: 17px;
font-weight: bold;
letter-spacing: 0;
margin: 10px;
padding: 8px;
text-decoration: none;
text-shadow: 1px 1px 0 #A5527E;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;

}

a.button-violett:hover{
background-color: #A5527E;
text-decoration:none;
background-image: -moz-linear-gradient(#A5527E, #D490C1);
-webkit-box-shadow: 3px 2px 5px #aaa;
-moz-box-shadow: 3px 2px 5px #aaa;

}
/************************************************************

7.) Button white

*************************************************************/

a.button-white{
float:left;
background-color: #dfdfdf;
background-image: -moz-linear-gradient(#dfdfdf, #BFBFBF);
border: 1px solid #BFBFBF;
color: #fff;
font-family: 'Arial',Helvetica,sans-serif;
font-size: 17px;
font-weight: bold;
letter-spacing: 0;
margin: 10px;
padding: 8px;
text-decoration: none;
text-shadow: 1px 1px 0 #BFBFBF;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;

}

a.button-white:hover{
background-color: #BFBFBF;
text-decoration:none;
background-image: -moz-linear-gradient(#BFBFBF, #dfdfdf);
-webkit-box-shadow: 3px 2px 5px #aaa;
-moz-box-shadow: 3px 2px 5px #aaa;

}
/************************************************************

8.) Button black

*************************************************************/

a.button-black{
float:left;
background-color: #000;
background-image: -moz-linear-gradient(#999, #000);
border: 1px solid #000;
color: #fff;
font-family: 'Arial',Helvetica,sans-serif;
font-size: 17px;
font-weight: bold;
letter-spacing: 0;
margin: 10px;
padding: 8px;
text-decoration: none;
text-shadow: 1px 1px 0 #000;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;

}

a.button-black:hover{
background-color: #999;
text-decoration:none;
background-image: -moz-linear-gradient(#000, #999);
-webkit-box-shadow: 3px 2px 5px #aaa;
-moz-box-shadow: 3px 2px 5px #aaa;

}
/************************************************************

8.) Button big

*************************************************************/

a.button-big{
float:left;
background-color: #EA0E02;
background-image: -moz-linear-gradient(#EA0E02, #620301);
border: 1px solid #620301;
color: #fff;
font-family: 'Arial',Helvetica,sans-serif;
font-size: 33px;
font-weight: bold;
letter-spacing: 0;
margin: 10px 50px 10px 10px;
padding: 20px;
text-decoration: none;
text-shadow: 1px 1px 0 #620301;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;

}

a.button-big:hover{
background-color: #620301;
text-decoration:none;
background-image: -moz-linear-gradient(#620301, #EA0E02);
-webkit-box-shadow: 3px 2px 5px #aaa;
-moz-box-shadow: 6px 4px 10px #aaa;

}

Der Font

Um noch einen schönen Font für die Buttons zu bekommen, wurde Java Script verwendet.
Zum einen die cufon-yui.js die den Font erzeugt, und zum anderen Ubuntu_font.js für die Darstellung.

In die Index.html oder index.php muss nun im header, dieser Aufruf für die Scripte eingefügt werden.

<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Ubuntu_font.js"></script>
<script type="text/javascript">
Cufon.replace('.button-big,.button-blue,.button-orange,.button-green,.button-grey,.button-lila,.button-violett,.button-white,.button-black', {
textShadow: '1px 1px rgba(4, 4, 4, 0.5)'

});
</script>

Bei Cufon.replace werden die Button-Bezeichnungen mit Komma getrennt. Alles was in replace steht wird mit dem Java Script Font ausgegeben. Natürlich kann da auch h1, h2, h3, h4 u.s.w. stehen!

textShadow: 1px ist der Schatten und bei rgba wird die Farbnummer ausgegeben. Beispiel: 255, 255, 255, = weiss #ffffff, 0.5 ist die Größe des Schatten.

Die Buttons sind dann mit diesen Aufruf eingebunden:

<a class="button-blue" href="#">CSS3 Button Kollektion...</a>

<a class="button-orange" href="#">CSS3 Button Kollektion...</a>

<a class="button-green" href="#">CSS3 Button Kollektion...</a>

<a class="button-grey" href="#">CSS3 Button Kollektion...</a>

<a class="button-lila" href="#">CSS3 Button Kollektion...</a>

<a class="button-violett" href="#">CSS3 Button Kollektion...</a>

<a class="button-white" href="#">CSS3 Button Kollektion...</a>

<a class="button-black" href="#">CSS3 Button Kollektion...</a>

Demo Download

2 Antworten zu “CSS3 Buttons”

Fabian says:
21. April 2011 um 23:25 Uhr

Hallo Jürgen
Danke für den Beitrag, dein Blog wird immer profesioneller! Die Buttons find ich klasse und free umso besser. Was wird denn aus den Webarte Sachen?

Fabian D.
- admin says:
  22. April 2011 um 12:36 Uhr
  
  Danke,
  CSS3 ist schon was feines.
  Webarte Sachen… – die ziehen jetzt alle zu combosa um.