3@TECH BLOG

日々の業務で得た知見やノウハウ、技術情報などを発信します。

ボタン基本スタイル

ボタン基本スタイル

2016-09-09 スニペット / ボタン

ボタンの基本スタイルです。 
各ブレイクポイントでインラインボタンからブロックボタンに切り替わります。

View

基本

 

xsでブロックボタン

基本

 

smでブロックボタン

基本

 

mdでブロックボタン

基本

 

lgでブロックボタン

基本

Source

基本
HTML

<input class="button" type="button" name="" value="input">
<button class="button" name="" value="">button</button>
HTML

xsでブロックボタン

HTML
基本
HTML

<input class="button xs-block" type="button" name="" value="input">
<button class="button xs-block" name="" value="">button</button>
HTML

smでブロックボタン

HTML
基本
HTML

<input class="button sm-block" type="button" name="" value="input">
<button class="button sm-block" name="" value="">button</button>
HTML

mdでブロックボタン

HTML
基本
HTML

<input class="button md-block" type="button" name="" value="input">
<button class="button md-block" name="" value="">button</button>
HTML

lgでブロックボタン

HTML
基本
HTML

<input class="button lg-block" type="button" name="" value="input">
<button class="button lg-block" name="" value="">button</button>
CSS
/* ====================================================
　ボタンスタイル
==================================================== */
.button {
    -webkit-appearance: none;
    box-shadow: 1px 0 2px rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1)0%, rgba(0, 0, 0, 0.2) 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1)0%, rgba(0, 0, 0, 0.2) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1)0%, rgba(0, 0, 0, 0.2) 100%);
    line-height: 1;
    vertical-align: middle;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    font-family: "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    color: #555555;
    cursor: pointer;
    display: inline-block;
    position: relative;
    border: none;
    padding: 0.5em 1em;
}
.button:hover { box-shadow: 1px 0 1px rgba(0, 0, 0, 0.2); }
.button:active {
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2)0%, rgba(0, 0, 0, 0.1) 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2)0%, rgba(0, 0, 0, 0.1) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2)0%, rgba(0, 0, 0, 0.1) 100%);
}

@media print, screen and (max-width: 767px) {
.button.xs-block {
    display: block;
    width: 100%;
    margin: 1em 0;
    padding: 0.75em 1em;
}
}

@media print, screen and (max-width: 991px) {
.button.sm-block {
    display: block;
    width: 100%;
    margin: 1em 0;
    padding: 0.75em 1em;
}
}

@media screen and (max-width: 1199px) {
.button.md-block {
    display: block;
    width: 100%;
    margin: 1em 0;
    padding: 0.75em 1em;
}
}

@media screen and (max-width: 9999px) {
.button.lg-block {
    display: block;
    width: 100%;
    margin: 1em 0;
    padding: 0.75em 1em;
}
}
/* ====================================================
	ボタンボックス
==================================================== */
.buttonBox { text-align: center; }
.buttonBox p { text-align: center; }
.buttonBox li .button {
    display: block;
    padding: 0.75em;
}
.buttonBox.center .row {
    display: inline-block;
    width: 103%;
    max-width: 768px;
}
.buttonBox.center.single .row { max-width: 384px; }

@media print, screen and (max-width: 767px) {
.buttonBox > .row > .col-xs-12 {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}
}

@media print, screen and (max-width: 991px) {
.buttonBox > .row > .col-sm-12 {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}
}

@media screen and (max-width: 1199px) {
.buttonBox > .row > .col-md-12 {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}
}

@media screen and (max-width: 9999px) {
.buttonBox > .row > .col-lg-12 {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}
}
SCSS
/* ====================================================
　ボタンスタイル
==================================================== */
//基本スタイル
@mixin basic_style {
    -webkit-appearance: none;
    box-shadow:1px 1px 1px rgba(0,0,0,0.05);
    border-radius:3px;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1)0%, rgba(0, 0, 0, 0.2) 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1)0%, rgba(0, 0, 0, 0.2) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1)0%, rgba(0, 0, 0, 0.2) 100%);
    line-height:1;
    vertical-align: middle;
    text-decoration: none;
    text-align:center;
    font-size:$base_text_size;
    font-weight:normal;
    font-family: "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    color:#000000;
    cursor: pointer;
}
//PC余白
$button_padding_pc: 0.5em 1em;
 
//SP余白
$button_padding_sp: 0.75em 1em;

/* ====================================================
　ボタンスタイル
==================================================== */
.button {
    @include basic_style;

    display: inline-block;
    position: relative;
    border: none;
    padding:$button_padding_pc;

    &:hover {
         box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    }
    &:active {
        background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2)0%, rgba(0, 0, 0, 0.1) 100%);
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2)0%, rgba(0, 0, 0, 0.1) 100%);
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2)0%, rgba(0, 0, 0, 0.1) 100%);
    }
}
@media print, screen and (max-width: 767px) {
    .button.xs-block {
        display: block;
        width: 100%;
        margin: 1em 0;
        padding:$button_padding_sp;
    }
}
@media print, screen and (max-width: 991px) {
    .button.sm-block {
        display: block;
        width: 100%;
        margin: 1em 0;
        padding:$button_padding_sp;
    }
}
@media screen and (max-width: 1199px) {
    .button.md-block {
        display: block;
        width: 100%;
        margin: 1em 0;
        padding:$button_padding_sp;
    }
}
@media screen and (max-width: 9999px) {
    .button.lg-block {
        display: block;
        width: 100%;
        margin: 1em 0;
        padding:$button_padding_sp;
    }
}

Contact お問い合わせ

お気軽にお問い合わせください。

PageTop