• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Button mit Hover-Effekt; komischer Abstand

Z

Zyl

Neues Mitglied
Hallo,

ich versuche einen maximal ergonomischen, schönen Button zu bauen, mit Hover-Effekt, und dabei so viel Code wie möglich von der HTML-Datei fernzuhalten. Ich wünsche mir komplett via CSS gehen zu können, hab aber im Moment noch einen merkwürdigen Pixel Abstand den ich nicht recht nachvollziehen kann (Firefox 12). Außerdem ist bis jetzt nur ein zweiter grafischer Zustand fürs geklickt seien ("active") drin:

index.html:
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <title>Button-Test</title>
        <link type="text/css" rel="stylesheet" href="style.css">
    </head>

    <body>
        Der Button:<br>
        <br>
        <button type="button" class="mybutton" title="Click to log in to the server."><span>Log in</span></button>
    </body>
</html>

style.css:
Code: 
* {
    margin:0px;
    padding:0px;
}

button.mybutton {
    font: normal 12px arial, sans-serif;
    height: 32px;
    padding: 0 16px 0 0;
    text-decoration: none;
    background: transparent url('bg_button_a.bmp') no-repeat top right;
    border: 0;
}

button.mybutton span {
    display: block;
    line-height: 22px;
    padding: 5px 0 5px 18px;
    background: transparent url('bg_button_span.bmp') no-repeat top left;
}

button.mybutton:active {
    background-position: bottom right;
}

button.mybutton:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
}

bg_button_a.bmp (19x64):
bgbuttona.png


bg_buttonspan.bmp (509x64):
bgbuttonspan.png


Das Ergebnis:
resultm.png


Wie man sieht ist da ein Versatz drin. Tatsächlich scheint der linke Teil nach unten gerutscht zu sein, außerhalb des eigentlichen Bereiches des Buttons, da der Bereich wo der Button auf Klick reagiert bereits in dem weißen horizontalen Ein-Pixel-Abstand oben links beginnt.
(Der "Klick-Punkt" liegt im oben-linkesten schwarzen Pixel des Maus-Cursors, unter Windows zumindest, afaik.)
Ich vermute der Abstand kommt durch das display: block, was aber notwendig ist da die Darstellung sonst wesentlich übler ausfällt.

Weiß da jemand Rat? Danke im Vorraus!

MfG, Zyl

P.S.: Eine gute Lösung um die Auswahl-Outline wegzubekommen würde ich außerdem auch willkommen heißen.
 
Wieso machst Du das mit Grafiken? Die runden Ecken kriegst Du mit border-radius hin, den Farbverlauf ebenfalls mit CSS3 (gradient imho als Stichwort). Notfalls nur die Ecken per CSS und den Hintergrund als sich wiederholende Grafik. Wäre einfacher und flexibler.
 
Danke für die Antwort. In der Tat bekomm ich mit gradients vergleichbares hin, aber grade mal nicht genau das. Desweiteren wäre das nur ein workaround.
Dennoch bau ich mal auf deinem Vorschlag auf. Wie schaffe ich es dass der Gradient bereits auf Hälfte der Höhe des Objektes die Zielfarbe erreicht, und wie verändere ich die Entwicklung (linear, quadratisch, exponentiell, logarithmisch, etc.)?

Mal ein Exzerpt davon wie es jetzt aussieht:
Code: 
button.rndbutton:hover {
    background-color: #fafafa;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#f4f4f4));
    background-image: -webkit-linear-gradient(top, #ffffff, #f4f4f4);
    background-image:    -moz-linear-gradient(top, #ffffff, #f4f4f4);
    background-image:     -ms-linear-gradient(top, #ffffff, #f4f4f4);
    background-image:      -o-linear-gradient(top, #ffffff, #f4f4f4);
}

Und ist die Copypasta wirklich erforderlich?
 
Danke, das hilft. Wie siehts aus mit dem layern von gradients, wenn ich einen mit 50% transparenz drüberlegen möchte, o.ä.?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben