CSS Button mit Image

  • CSS

Es gibt 2 Antworten in diesem Thema. Der letzte Beitrag () ist von EiPott.

    CSS Button mit Image

    Hallo, ich habe einen Button der auf der Rechten Seite ein Icon hat. Nun soll aber, wenn man mit der Maus über den Button ist, das Icon etwas nach Rechts gehen und wenn man mit der Maus wieder weg geht soll das Icon wieder zurück bzw. bei button:hover der IconRight{padding-right: 25px;} sein und bei Normal IconRight {padding-right: 45px;}

    CSS-Quellcode

    1. .buttonCentered {text-align: center;margin-bottom: 30px;}
    2. .button, .button:link, .button:focus {
    3. cursor: pointer;
    4. position: relative;
    5. margin-top: 10px;
    6. display: inline-block;
    7. text-decoration: none;
    8. font-size: 12px;
    9. /*font-weight: bold;
    10. text-transform: uppercase; */
    11. color: #xxxxxx;
    12. padding: 8px 20px;
    13. background: -moz-linear-gradient(
    14. top,
    15. #xxxxxx xxx%,
    16. #xxxxxx);
    17. background: -webkit-gradient(
    18. linear, left top, left bottom,
    21. from(#xxxxxx),
    22. to(#xxxxxx));
    24. -moz-border-radius: 3px;
    25. -webkit-border-radius: 3px;
    26. border-radius: 3px;
    27. border: 1px solid #xxxxxx;
    28. text-shadow: 0 0 0;
    29. }
    30. .button:hover {
    31. text-decoration: none;
    32. background: -moz-linear-gradient(
    33. top,
    34. #xxxxxx xxx%,
    35. #xxxxxx);
    36. background: -webkit-gradient(
    37. linear, left top, left bottom,
    39. from(#xxxxxx),
    40. to(#xxxxxx));
    42. color: #xxxxxx;
    43. border-color: #xxxxxx;
    44. }
    45. .button.iconLeft {padding-left: 45px;}
    46. .button.iconRight {padding-right: 45px;}
    47. .button i {display: inline-block;position: absolute;top: 50%;margin-top: -9px;width: 16px;height: 16px;background-repeat: no-repeat;background-position: 50% 50%;}
    48. .button.iconLeft i {left: 20px;}
    49. .button.iconRight i {right: 20px;}
    50. .button i.more {background-image: url('../images/more.png');}
    51. .button i.email {background-image: url('../images/mail.png');margin-top: -8px;}
    52. .button i.downl {background-image: url('../images/download.png');}


    In HTML sieht der Button dan so aus:

    HTML-Quellcode

    1. a href="./" class="button iconRight"> <i class="more"></i>Download</a>

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „SMarioMasterX“ ()

    Könntest du vielleicht eine Zip, Rar oder 7z datei anhängen, in welcher die Grafiken, die HTML Datei und die CSS liegt? da ich die Bilder nicht habe ist es Schlecht nachzubauen, daher wäre der ganze Ordner Hilfreich, oder die Website als Link, wo der Button ist.
    var coffee = new coffee();
    if(coffee.empty)
    {
    coffee.refill();
    } else {
    coffee.drink();
    }

Facebook