Glossy Button mit CSS3 erstellen

Um moderne und effektvolle Buttons für seine Webseite zu erstellen, benötigt man heutzutage keine besonderen Photoshop Fähigkeiten mehr. Mit der Einführung von CSS3 sind Mittel und Möglichkeiten gegeben, um damit schöne Glossy Buttons zu erstellen. Hier zeige ich ein Beispiel wie man mit relativ wenig Aufwand und lediglich einigen Zeilen CSS-Code einen Button mit Glanz-Effekt und Mouseover-Eigenschaften erstellt.

Ein einfacher Button ohne besondere Style-Eigenschaften:

Klick mich!

 CSS-Code:

.button.no-gloss {
    font-size: 14px;
    border: 1px solid #009;
    background: #03f;
    color: #fff;
    padding: 5px 10px;
}
.button.no-gloss:hover {
    background: rgba(0,0,255,0.7);
}

Ein Glossy Button mit CSS3 Formatierung:

Klick mich!

CSS-Code:

.button.gloss {
    color:#fff;
    padding: 5px 10px;
    background:#033755;
    -webkit-box-shadow:
        3px 3px 6px rgba(0, 0, 0, .2),
        0px 0px 3px rgba(0, 0, 0, .1),
        inset 0px 5px 12px #004499,
        inset 0px 15px 2px rgba(59, 131, 240, .5),
        inset 0px 25px 25px #004499;
    -moz-box-shadow:
        3px 3px 6px rgba(0, 0, 0, .2),
        0px 0px 3px rgba(0, 0, 0, .1),
        inset 0px 5px 12px #004499,
        inset 0px 15px 2px rgba(59, 131, 240, .5),
        inset 0px 25px 25px #004499;
    box-shadow:
        3px 3px 6px rgba(0, 0, 0, .2),
        0px 0px 3px rgba(0, 0, 0, .1),
        inset 0px 5px 12px #004499,
        inset 0px 15px 2px rgba(59, 131, 240, .5),
        inset 0px 25px 25px #004499;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    font-size: 14px;
    color: #fff;
    -webkit-text-shadow: 1px 1px 1px rgb(0,0,0);
    -moz-text-shadow: 1px 1px 1px rgb(0,0,0);
    text-shadow: 1px 1px 1px rgb(0,0,0);
}

.button.gloss:hover {
    background:     #030054;
    -webkit-box-shadow:
        2px 2px 4px rgba(0, 0, 0, .2),
        0px 0px 3px rgba(0, 0, 0, .1),
        inset 0px 10px 12px #004499,
        inset 0px 20px 2px rgba(59, 131, 240, .5),
        inset 0px 25px 25px #004499;
    -moz-box-shadow:
        2px 2px 4px rgba(0, 0, 0, .2),
        0px 0px 3px rgba(0, 0, 0, .1),
        inset 0px 10px 12px #004499,
        inset 0px 20px 2px rgba(59, 131, 240, .5),
        inset 0px 25px 25px #004499;
    box-shadow:
        2px 2px 4px rgba(0, 0, 0, .2),
        0px 0px 3px rgba(0, 0, 0, .1),
        inset 0px 10px 12px #004499,
        inset 0px 20px 2px rgba(59, 131, 240, .5),
        inset 0px 25px 25px #004499;
    -webkit-text-shadow: -1px -1px 1px rgb(0,0,0);
    -moz-text-shadow: -1px -1px 1px rgb(0,0,0);
    text-shadow: -1px -1px 1px rgb(0,0,0);

}