Buttons

einfache Buttons und Links als Button formatiert

<!-- html-code -->
<a href="/search" class="btn">Zur Suche</a>
<button type="submit" class="btn">abschicken</button>

Damit diese Buttons auch wie Buttons aussehen, können wir eine Regel für alle Elemente der css-Klasse btn definieren:

/* css-code */
.btn {
   border: 1px solid grey;
   border-radius: 4px;
   background-color: #f2f2f2;
   color: black;
   padding: 5px 12px 5px 12px;
}
.btn:hover {
    background-color: #cccccc;
    text-color: black;
}

Das Ergebnis sollte in etwa wie folgt aussehen:

Suche



Buttons mit Icons

Zwei Buttons mit Icon und Text
<!-- html-code -->
<a href="movies.html" class="btn btn-icon btn-movies">movies</a>
<a href="search.html" class="btn btn-icon btn-search">search</a>
/* css-code */
.btn {
    font-size: 1.4rem;
    display: inline-block;
    padding: 0.6rem  1.2rem 0.6rem 1.2rem;
    margin:0.5rem;
    text-decoration: none;
    color: grey;
    border-radius: 0.5rem;
    box-shadow: 0.1rem 0.1rem 0.4rem grey;
}

.btn:hover {
    box-shadow: 0rem 0rem 0.4rem grey;
    transform: translate(1px, 1px);
}

.btn-icon {
    padding-left:3rem;
    background-size:1.5rem;
    background-repeat:no-repeat;
    background-position: 0.6rem center;
}

.btn-movie {
    background-image: url("/static/icon-film-grey.svg");
}

.btn-search {
    background-image: url("/static/icon-search-grey.svg");
}