CSS Buttons mit Schatten-Effekten (Envato Marketplace)

Mithilfe des folgenden CSS Codes könnt Ihr ganz leicht solche Buttons für eure Webseite (WordPress, PHP usw.) erstellen.

.btn {
background: #0084b4;
border-radius: 3px;
color: #fff;
display: inline-block;
font-family: sans-serif;
margin: 5px 0;
padding: 6px 12px;
text-decoration: none;
-webkit-box-shadow: 0px 4px 0px 0px #005472;
-moz-box-shadow: 0px 4px 0px 0px #005472;
box-shadow: 0px 4px 0px 0px #005472;
}

.btn:hover {
background: #00729B;
}

.btn:focus,
.btn:active {
margin-top: 7px;
-webkit-box-shadow: 0px 2px 0px 0px #005472;
-moz-box-shadow: 0px 2px 0px 0px #005472;
box-shadow: 0px 2px 0px 0px #005472;
}

Ergebnis

Demo-App (appyet) (2286 Downloads)

Ihr könnt natürlich noch die Farben anpassen, wie Ihr wollt 🙂

Was this article helpful?

Leave A Comment?

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.