Buttons

There are no notes for this item.

<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 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 for this component. */
  • Content:
    /*------------------------------------*\
    	Buttons
    \*------------------------------------*/
    
    .button {
    	display: inline-block;
    	border: none;
    	border-radius: 4px;
        padding: 0.7rem 1.4rem;
        margin: 0;
        text-decoration: none;
    	background: $color-secondary-dark;
        color: $color-white;
        font-family: sans-serif;
        font-size: 1rem;
        cursor: pointer;
        text-align: center;
    	transition: background 200ms ease-in-out, transform 150ms ease;
    	font-weight: bold;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
    
    .button:hover,
    .button:focus {
    	background: $color-secondary;
    	color: #fff;
    	text-decoration: none;
    }
    
    .button:active {
        transform: scale(0.99);
    }
    
    .button.secondary {
    	background-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.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
    }
    
  • URL: /components/raw/buttons/buttons.scss
  • Filesystem Path: components/02-components/buttons/buttons.scss
  • Size: 1.8 KB