.button{
    display: inline-block;
    font-size: 14px;
    color: #fff;
    background-color: #ccc;
    padding: 1em;
    border-radius: 10px;
    // マウスが乗った状態
    &:hover {
        color: $background;
        background-color: tomato;
        box-shadow: 0 0 2px #000;
    }
    // 押し込んでる時の状態
    &:active {
        position: relative;
        top: 2px;
        color: $background;
        background-color: tomato;
        box-shadow: inset 0 0 10px #000;
    }
    // jsで付与する
    &.is-disabled {
        color: #fff;
        background-color: #ccc;
    }
}


 //
 // ここからはふつうじゃないボタン
 //

 /*
## 普通じゃないのボタン

    normal
    hover
    active
    disabled

*/
.button--abnormal {
	@extend .button;
	color: yellow;
	background-color: blue;
}