1. Startseite
  2. › Themen
  3. › Online-Spende - twingle

Spenden-Button

Buttons als Bild

Ein Spendenbutton muss auffallen und auf der Startseite platziert werden, wenn Sie tatsächlich um Online-Spenden werben wollen.

Sehen Sie sich hier die zwei Beispiele an:

Brot für die Welt

Dekanat Coburg

Wir haben hier für zwei Spendenbuttons, die Sie gerne verwenden können (bereit gestellt von Patricia Keim):

Spenden-Button Violett
Spenden-Button Türkies

Die Bilder samt der Photoshop-Datei können Sie hier herunterladen:

Spenden-Button

Buttons mit CSS erstellt

Wenn Sie fit mit HTML/CSS sind, können Sie auch Spendenbuttons ganz ohne Bilder erstellen. Hier ein Beispiel:

Jetzt spenden

Hier der HTML-Code (ersetzen Sie '#' mit ihrem URL-Ziel):

<a href="#" class="spendenbtn">Jetzt spenden</a>

Hier der CSS-Code dazu:

<style type="text/css">
.spendenbtn 
{
 -moz-box-shadow: 1px 2px 9px 0px #9a8aa6;
 -webkit-box-shadow: 1px 2px 9px 0px #9a8aa6;
 box-shadow: 1px 2px 9px 0px #9a8aa6;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9177a3), color-stop(1, #5c2282) );
 background:-moz-linear-gradient( center top, #9177a3 5%, #5c2282 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9177a3', endColorstr='#5c2282');
 background-color:#9177a3;
 -webkit-border-top-left-radius:20px;
 -moz-border-radius-topleft:20px;
 border-top-left-radius:20px;
 -webkit-border-top-right-radius:20px;
 -moz-border-radius-topright:20px;
 border-top-right-radius:20px;
 -webkit-border-bottom-right-radius:20px;
 -moz-border-radius-bottomright:20px;
 border-bottom-right-radius:20px;
 -webkit-border-bottom-left-radius:20px;
 -moz-border-radius-bottomleft:20px;
 border-bottom-left-radius:20px;
text-indent:0px;
 border:1px solid #5c2282;
 display:inline-block;
 color:#ffffff;
 font-family:Verdana;
 font-size:18px;
 font-weight:bold;
 font-style:normal;
height:54px;
 line-height:54px;
width:183px;
 text-decoration:none;
 text-align:center;
}
.spendenbtn:hover 
{
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5c2282), color-stop(1, #9177a3) );
 background:-moz-linear-gradient( center top, #5c2282 5%, #9177a3 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5c2282', endColorstr='#9177a3');
 background-color:#5c2282;
 color:#ffffff;
}.spendenbtn:active {
 position:relative;
 top:1px;
}
</style>

Online-Button-Generator

Es gibt unzählige Online-Button-Generatorern. Suchen Sie einfach mit Bing oder mit Google nach 'CSS Button Generator', dann werden sie fündig. Obiger Button wurde mit https://www.button-generator.de/ erstellt.

Bitte beachten Sie: die Seiten enthalten evtl. Werbung und setzen Cookies.

Themen