Loading...

Button


Button in Homepage einfügen

Auf den meisten Seiten sind sie zu finden: "Buttons" - als Downloadbutton, als Linkbutton, als Sende- oder Bestellknopf und mit Sicherheit gibt es noch eine ganze Menge mehr, was man mit Buttons machen kann.

Ich möchte euch erklären, wir Ihr auch so einen Button auf eurer Seite beim Homepage-Baukasten einbinden und verwenden könnt. Prinzipiell braucht ihr dazu ein kleines bisschen HTML-Code und ein kleines bisschen dazugehörigen CSS-Code. Wir ihr diesen in eure Seite einbinden könnt, erfahrt ihr hier.
 

Test 

 <a href="http://www.homepage-baukasten.de" target="_blank" class="btn btn-success" role="button">Test</a>   

Eine weitere Möglichkeit Buttons zu verwenden, ist, dass ihr damit auf eurer Seite navigieren könnt. Die Buttons selbst (also das styling der Buttons) habe ich von hier. Da könnt ihr euch einen schönen Knopf zusammen klicken, und dann den dort erzeugten CSS-Code bei uns unter Designeinstellungen eingeben. Zur Erinnerung, wie es geht, steht hier: soyonlyn.de.tl/Code-einf.ue.gen.htm

<< zurückweiter >>

Und so sieht der Spaß dann in Code aus:

CSS-Code für das Button Styling

  .btn_follow {    background: #d4d4d4;    background-image: -webkit-linear-gradient(top, #d4d4d4, #b8b8b8);    background-image: -moz-linear-gradient(top, #d4d4d4, #b8b8b8);    background-image: -ms-linear-gradient(top, #d4d4d4, #b8b8b8);    background-image: -o-linear-gradient(top, #d4d4d4, #b8b8b8);    background-image: linear-gradient(to bottom, #d4d4d4, #b8b8b8);    -webkit-border-radius: 0;   -moz-border-radius: 0;   border-radius: 0px;    -webkit-box-shadow: 0px 1px 3px #666666;    -moz-box-shadow: 0px 1px 3px #666666;    box-shadow: 0px 1px 3px #666666;    font-family: Arial;    color: #ffffff;    font-size: 20px;    padding: 10px 20px 10px 20px;    text-decoration: none; }   .btn_follow:hover {    background: #bdbdbd;    background-image: -webkit-linear-gradient(top, #bdbdbd, #9ea1a3);    background-image: -moz-linear-gradient(top, #bdbdbd, #9ea1a3);    background-image: -ms-linear-gradient(top, #bdbdbd, #9ea1a3);    background-image: -o-linear-gradient(top, #bdbdbd, #9ea1a3);    background-image: linear-gradient(to bottom, #bdbdbd, #9ea1a3);    text-decoration: none; }   

Und hier der Code zum Knopf dann auf der Seite einfügen mit Verlinkung

 <a href="http://soyonlyn.de.tl/Mouseover.htm" class="btn_follow"><< zurück/a>  <a href="http://soyonlyn.de.tl/Code-einf.ue.gen.htm" class="btn_follow">weiter >>/a>