No notes defined.
<div class="btn-container">
<a class="button small" href="#" title="Button">Small button</a>
<a class="button" href="#" title="Button">Standard button</a>
<a class="button secondary" href="#" title="Button">Secondary button</a>
<a class="button border" href="#" title="Button">Border button</a>
<a class="button medium" href="#" title="Button">Medium button</a>
<a class="button large" href="#" title="Button">Large button</a>
<a class="button ss-icon ss-cart" href="#" title="Button">Button with icon</a>
<button class="button" type="button">Form button</button>
<input type="submit" name="submit" class="button" value="Submit button">
<ul class="button-group">
<li><a class="ss-icon ss-cart" href="#" title="Buy now">Buy now</a></li>
<li><a href="#" title="Learn more">Learn More</a></li>
</ul>
</div>
/* No context defined. */
/*------------------------------------*\
Buttons
\*------------------------------------*/
.button {
display: inline-block;
border: none;
border-radius: 4px;
padding: 0.6rem 1.6rem;
margin: 0;
text-decoration: none;
background: $color-secondary-dark;
border: 2px solid $color-secondary-dark;
color: $color-white;
font-family: sans-serif;
font-size: 1rem;
cursor: pointer;
text-align: center;
transition: background 200ms ease-in-out, border 200ms ease-in-out, transform 150ms ease;
font-weight: bold;
-webkit-appearance: none;
-moz-appearance: none;
}
.button:hover,
.button:focus {
background: $color-secondary;
border-color: $color-secondary;
color: #fff;
text-decoration: none;
}
.button:active {
transform: scale(0.99);
}
.button.secondary {
background-color: $color-primary;
border-color: $color-primary;
}
.button.secondary:hover,
.button.secondary:focus {
background: $color-primary-dark;
color: #fff;
text-decoration: none;
}
.button.small {
padding: 0.4rem 1rem;
font-size: $font-size-small;
}
.button.medium {
padding: 0.8rem 1.6rem;
font-size: 1.2rem;
}
.button.large {
padding: 1rem 2rem;
font-size: 1.4rem;
}
.button.border {
background-color: transparent;
border: 2px solid $color-white;
}
.button.ss-icon:before{
position: relative;
top: 3px;
margin-right: 0.6em;
margin-left: -0.2em;
font-size: 110%;
}
ul.button-group{
display:inline-block;
margin:0 0 15px!important;
list-style:none;
padding:0;
}
ul.button-group li{
display:inline-block
}
ul.button-group li a{
display:inline-block;
padding:8px 20px 7px;
// border-left:1px solid rgba(0,0,0,.2);
border-right:1px solid rgba(255,255,255,0.5);
color:#fff;
}
ul.button-group li a.ss-icon:before{
position:relative;
top:2px;
padding-right:8px
}
ul.button-group li a:hover{
background:rgba(0,0,0,.06)
}
ul.button-group li:first-child a{
border-left:none
}
ul.button-group li:last-child a{
border-right:none
}