Hallo,
ich brauche einmal den kompletten Code für einen Button z.B in Rot um diesen in einer anderen CSS Datei zu lagern.
Leider blicke ich da nicht ganz durch was man für einen Button alles braucht.
Deshalb mal hier das komplette CSS für die Buttons
wäre jemand so freundlich und könnte mir das raussuchen ?
ich brauche einmal den kompletten Code für einen Button z.B in Rot um diesen in einer anderen CSS Datei zu lagern.
Leider blicke ich da nicht ganz durch was man für einen Button alles braucht.
Deshalb mal hier das komplette CSS für die Buttons
Code:
/* Buttons */
.button,a.button,a.button:link,a.button:active,a.button:visited {
background: #777 none repeat scroll 0 0;
border: 0;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 0.85rem;
padding: 0.825rem 1rem;
text-align: center;
transition: all 0.20s linear 0s;
-o-transition: all 0.20s linear 0s;
-ms-transition: all 0.20s linear 0s;
-moz-transition: all 0.20s linear 0s;
-webkit-transition: all 0.20s linear 0s;
}
.button.rounded-btn {
border-radius: 4px;
}
.button.rounded-full-btn {
border-radius: 100px;
}
.button:hover {box-shadow: 0 0 10px 100px rgba(255,255,255,0.15) inset;}
.button.secondary-btn,a.button.secondary-btn,a.button.secondary-btn:link,a.button.secondary-btn:active,a.button.secondary-btn:visited {
background: #444 none repeat scroll 0 0;
}
.button.cancel-btn,a.button.cancel-btn,a.button.cancel-btn:link,a.button.cancel-btn:active,a.button.cancel-btn:visited {
background: #dc003a none repeat scroll 0 0;
}
.button.submit-btn,a.button.submit-btn,a.button.submit-btn:link,a.button.submit-btn:active,a.button.submit-btn:visited {
background: black none repeat scroll 0 0;
}
.button.reload-btn,a.button.reload-btn,a.button.reload-btn:link,a.button.reload-btn:active,a.button.reload-btn:visited {
background: #ff9800 none repeat scroll 0 0;
}
.button.disabled-btn {
cursor: not-allowed!important;
opacity: 0.2;
}
.button i {
background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
border-radius: 27px;
color: #fff!important;
display: inline-block;
font-size: 0.8rem;
height: 27px;
line-height: 27px;
margin-right: 5px;
width: 27px;
transition: all 0.20s linear 0s;
-o-transition: all 0.20s linear 0s;
-ms-transition: all 0.20s linear 0s;
-moz-transition: all 0.20s linear 0s;
-webkit-transition: all 0.20s linear 0s;
}
.button:hover > i {
background: rgba(0, 0, 0, 0.06) none repeat scroll 0 0;
}
HTML:
<div class="line">
<div class="margin">
<div class="s-12 m-6 l-five">
<a class="button rounded-btn s-12 margin-bottom" href="#">Button</a>
</div>
<div class="s-12 m-6 l-five">
<a class="button rounded-btn submit-btn s-12 margin-bottom" href="#">Submit Button</a>
</div>
<div class="s-12 m-6 l-five">
<a class="button rounded-btn cancel-btn s-12 margin-bottom" href="#">Cancel Button</a>
</div>
<div class="s-12 m-6 l-five">
<a class="button rounded-btn reload-btn s-12 margin-bottom" href="#">Reload Button</a>
</div>
<div class="s-12 m-6 l-five">
<a class="button rounded-btn disabled-btn s-12 margin-bottom" href="#">Disabled Button</a>
</div>
</div>
</div>