easy-homepage.info - Willkommen bei easy-homepage

Dieses Beispiel zeigt, wie Sie mit nur wenigen Zeilen CSS Code ansprechende Button-Effekte erzielen können. Das Aussehen der Buttons mag nicht mit den Meisterwerken einiger Photoshop-Künstler mithalten können, doch wie Sie erkennen können sind auch ohne Grafiken einige Tricks möglich.

 .button a {
    width: 100px;
    font-size: 12px;
    line-height:14px;
    padding: 3px;
    display: block;
    text-align: center;
    background-color:#ddd;
}

.button a:link, .button a:visited {
    color: #222;
    text-decoration: none;
    border:1px solid #aaa;
}

.button a:hover {
    color: #222;
    background-color: #abc;
    border-top: 1px solid #222;
    border-left: 1px solid #222;
}

 <table width="275">
    <tr>
        <td width="50%">
            <div class="button">
                <a href="" name="">Yes</a>
            </div>
        </td>
        <td width="50%">
            <div class="button">
                <a href="" name="">No</a>
            </div>
        </td>
    </tr>
</table>

Vorschau ansehen