CSS Button für Magento Shops

Css Code für die Erstellung eines Buttons mit Hover Effekt

.readNow {
-moz-box-shadow: 0px 1px 0px 0px #ffffff;
-webkit-box-shadow: 0px 1px 0px 0px #ffffff;
box-shadow: 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #e8e8e8) );
background:-moz-linear-gradient( center top, #ffffff 5%, #e8e8e8 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff‘, endColorstr=’#e8e8e8′);
background-color:#ffffff;
-webkit-border-top-left-radius:4px;
-moz-border-radius-topleft:4px;
border-top-left-radius:4px;
-webkit-border-top-right-radius:4px;
-moz-border-radius-topright:4px;
border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-bottomright:4px;
border-bottom-right-radius:4px;
-webkit-border-bottom-left-radius:4px;
-moz-border-radius-bottomleft:4px;
border-bottom-left-radius:4px;
text-indent:0;
border:1px solid #98B4C1;
display:inline-block;
color:#000;
font-size:11px;
font-weight:normal;
font-style:normal;
height:25px;
line-height:25px;
width:100px;
text-decoration:none;
text-align:center;
}
.readNow:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#dfdfdf‘, endColorstr=’#ededed‘);
background-color:#dfdfdf;
}.readNow:active {
position:relative;
top:1px;
}

 

Leave A Comment?

You must be logged in to post a comment.