CSS-Buttons ohne Bilddateien

Ein einfacher Button

Drück mich

.button {
/* Schriftfarbe */
color:#333;
/* Hintergrundfarbverlauf */
background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* W3C */
}

Button mit dezentem Box-Schatten

Drück mich

.button {
/* Schriftfarbe */
color:#fff;
/* Hintergrundfarbverlauf */
background: #aebcbf; /* Old browsers */
background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* W3C */
/* Schatten hinzufügen */
-webkit-box-shadow: 0 2px 5px #999; /* Saf3.1+, Chrome */
-moz-box-shadow: 0 2px 5px #999; /* FF3.5+ */
box-shadow: 0 2px 5px #999;
}

Ein einfacher Button mit :hover

Drück mich

.button {
/* Schriftfarbe */
color:#fff;
/* Hintergrundfarbverlauf */
background: #39648c; /* Old browsers */
background: -moz-linear-gradient(top, #39648c 0%, #0d3458 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#39648c), color-stop(100%,#0d3458)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #39648c 0%,#0d3458 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #39648c 0%,#0d3458 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #39648c 0%,#0d3458 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#39648c', endColorstr='#0d3458',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #39648c 0%,#0d3458 100%); /* W3C */
}

.button:hover {
background: #284c6d; /* Old browsers */
background: -moz-linear-gradient(top, #284c6d 0%, #497cab 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#284c6d), color-stop(100%,#497cab)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #284c6d 0%,#497cab 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #284c6d 0%,#497cab 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #284c6d 0%,#497cab 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#284c6d', endColorstr='#497cab',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #284c6d 0%,#497cab 100%); /* W3C */
}

Button mit Text- und Box-Schatten mit :active

Drück mich

.button {
/* Schriftfarbe */
color:#222;
/* Hintergrundfarbverlauf */
background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */ /* Rahmen */
border:1px solid #f7f7f7;
/* Rahmenschatten */
-moz-box-shadow: 0 2px 5px #999; /* FF3.5+ */
-webkit-box-shadow: 0 2px 5px #999; /* Saf3.1+, Chrome */
box-shadow: 0 2px 5px #999;
/* Textschatten */
text-shadow: 0 1px 1px #666;
}

.button:active {
/* Schriftfarbe */
color:#666;
/* Hintergrundfarbverlauf */
background: #ededed; /* Old browsers */
background: -moz-linear-gradient(top, #ededed 0%, #f7f7f7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#f7f7f7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ededed 0%,#f7f7f7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ededed 0%,#f7f7f7 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ededed 0%,#f7f7f7 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ededed 0%,#f7f7f7 100%); /* W3C */
}

Button mit Text- und Box-Schatten mit :hover

Drück mich

.button {
/* Schriftfarbe */
color: #fff;
/* Hintergrundfarbverlauf */
background: #b3dced; /* Old browsers */
background: -moz-linear-gradient(top, #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3dced), color-stop(50%,#29b8e5), color-stop(100%,#bce0ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* W3C */
/* Rahmenschatten */
-moz-box-shadow: 0 3px 5px #999; /* FF3.5+ */
-webkit-box-shadow: 0 3px 5px #999; /* Saf3.1+, Chrome */
box-shadow: 0 3px 5px #999;
/* Textschatten */
text-shadow: 0 1px 1px #222;
/* Transparenz */
opacity:0.8;
}

.button:hover {
/* Transparenz */
opacity:1;
}

Button mit Text- und Box-Schatten sowie :active und :hover

Drück mich

.button {
/* Schriftfarbe */
color: #fff;
/* Rahmen */
border: solid 1px #da7c0c;
/* Hintergrundfarbverlauf */
background: #faa51a; /* Old browsers */
background: -moz-linear-gradient(top, #faa51a 0%, #f47a20 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#faa51a), color-stop(100%,#f47a20)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #faa51a 0%,#f47a20 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #faa51a 0%,#f47a20 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #faa51a 0%,#f47a20 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faa51a', endColorstr='#f47a20',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #faa51a 0%,#f47a20 100%); /* W3C */
/* Text-Schatten */
text-shadow: 0 1px 1px rgba(0,0,0,.3);
/* Box-Schatten */
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); /* FF3.5+ */
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); /* Saf3.1+, Chrome */
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.button:hover {
/* Hintergrundfarbverlauf */
background: #f88e11; /* Old browsers */
background: -moz-linear-gradient(top, #f88e11 0%, #f06015 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f88e11), color-stop(100%,#f06015)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f88e11 0%,#f06015 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f88e11 0%,#f06015 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #f88e11 0%,#f06015 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f88e11', endColorstr='#f06015',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #f88e11 0%,#f06015 100%); /* W3C */
}

.button:active {
/* Verschieben */
top: 1px;
/* Schriftfarbe */
color: #fcd3a5;
/* Hintergrundfarbverlauf */
background: #f47a20; /* Old browsers */
background: -moz-linear-gradient(top, #f47a20 0%, #faa51a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f47a20), color-stop(100%,#faa51a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f47a20 0%,#faa51a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f47a20 0%,#faa51a 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #f47a20 0%,#faa51a 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f47a20', endColorstr='#faa51a',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #f47a20 0%,#faa51a 100%); /* W3C */
}

Noch ein Button mit Text- und Box-Schatten sowie :active und :hover

Drück mich

.button {
/* Schriftfarbe */
color: #fff;
/* Hintergrundfarbverlauf */
background: #568bbc; /* Old browsers */
background: -moz-linear-gradient(top, #568bbc 0%, #39648c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#568bbc), color-stop(100%,#39648c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #568bbc 0%,#39648c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #568bbc 0%,#39648c 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #568bbc 0%,#39648c 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#568bbc', endColorstr='#39648c',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #568bbc 0%,#39648c 100%); /* W3C */
/* Text-Schatten */
text-shadow: 1px 1px 1px black;
/* Box-Schatten */
-moz-box-shadow: 0 1px 3px black; /* FF3.5+ */
-webkit-box-shadow: 0 1px 3px black; /* Saf3.1+, Chrome */
box-shadow: 0 1px 3px black;
}

.button:hover {
/* Hintergrundfarbverlauf */
background: #284c6d; /* Old browsers */
background: -moz-linear-gradient(top, #284c6d 0%, #497cab 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#284c6d), color-stop(100%,#497cab)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #284c6d 0%,#497cab 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #284c6d 0%,#497cab 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #284c6d 0%,#497cab 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#284c6d', endColorstr='#497cab',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #284c6d 0%,#497cab 100%); /* W3C */
}

.button:active {
/* Box-Schatten */
-moz-box-shadow: 0 2px 6px black;
-webkit-box-shadow: 0 2px 6px black;
box-shadow: 0 2px 6px black;
}

Button mit Box-Schatten und :active

Drück mich

.button {
position: relative;
background: #e5e5e5;
background: -moz-linear-gradient(top, #e5e5e5 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
background: -o-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 );
background: linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
border: 1px solid #ffffff;
-moz-box-shadow: 0 0 10px #777; /* FF3.5+ */
-webkit-box-shadow: 0 0 10px #777; /* Saf3.1+, Chrome */
box-shadow: 0 0 10px #777;
}

.button:active {
top: 4px;
-moz-box-shadow: 0 0 10px #333; /* FF3.5+ */
-webkit-box-shadow: 0 0 10px #333; /* Saf3.1+, Chrome */
box-shadow: 0 0 10px #333;
}

Button mit Innen-Box-Schatten und :hover

Drück mich

.button {
background: #eeeeee;
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: linear-gradient(top, #eeeeee 0%,#cccccc 100%);
border: 1px solid #fff;
-moz-box-shadow: 0 0 5px #333, inset 0 15px 35px #aaa;
-webkit-box-shadow: 0 0 5px #333, inset 0 15px 35px #aaa;
box-shadow: 0 0 5px #333, inset 0 15px 35px #aaa;
}

.button:hover {
box-shadow: 0 0 5px #333, inset 0 25px 35px #888;
}

Einstellungen für alle Buttons

.button {
/* Breite festlegen */
width:150px;
/* Außenabstand definieren */
margin:20px auto;
/* Innenabstand definieren */
padding:10px;
/* Runde Ecken */
-webkit-border-radius: 5px; /* Saf3.1+, Chrome */
-moz-border-radius: 5px; /* FF3.5+ */
border-radius: 5px;
}

↑ Seitenanfang