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;}
In HTML sieht der Button dan so aus:
CSS-Quellcode
- .buttonCentered {text-align: center;margin-bottom: 30px;}
- .button, .button:link, .button:focus {
- cursor: pointer;
- position: relative;
- margin-top: 10px;
- display: inline-block;
- text-decoration: none;
- font-size: 12px;
- /*font-weight: bold;
- text-transform: uppercase; */
- color: #xxxxxx;
- padding: 8px 20px;
- background: -moz-linear-gradient(
- top,
- #xxxxxx xxx%,
- #xxxxxx);
- background: -webkit-gradient(
- linear, left top, left bottom,
- from(#xxxxxx),
- to(#xxxxxx));
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- border-radius: 3px;
- border: 1px solid #xxxxxx;
- text-shadow: 0 0 0;
- }
- .button:hover {
- text-decoration: none;
- background: -moz-linear-gradient(
- top,
- #xxxxxx xxx%,
- #xxxxxx);
- background: -webkit-gradient(
- linear, left top, left bottom,
- from(#xxxxxx),
- to(#xxxxxx));
- color: #xxxxxx;
- border-color: #xxxxxx;
- }
- .button.iconLeft {padding-left: 45px;}
- .button.iconRight {padding-right: 45px;}
- .button i {display: inline-block;position: absolute;top: 50%;margin-top: -9px;width: 16px;height: 16px;background-repeat: no-repeat;background-position: 50% 50%;}
- .button.iconLeft i {left: 20px;}
- .button.iconRight i {right: 20px;}
- .button i.more {background-image: url('../images/more.png');}
- .button i.email {background-image: url('../images/mail.png');margin-top: -8px;}
- .button i.downl {background-image: url('../images/download.png');}
In HTML sieht der Button dan so aus:
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „SMarioMasterX“ ()