【ワードプレステーマChillに標準装備】便利すぎるCSSと表示サンプル – CSSボタン編

/* ----------------------------------------------------------------------
 button - CSSボタンのスタイル
---------------------------------------------------------------------- */
.q_button { min-width:200px; max-width:90%; background-color:#535353; display:inline-block; vertical-align:middle; padding:.6em 1.3em .5em; font-weight:400; font-size:100%; color:#fff; margin:0; text-decoration:none; text-align:center; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; transition:all 0.3s ease-in-out 0s; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.q_button:hover, .q_button:focus { text-decoration:none; color:#fff; background-color:#7d7d7d; box-shadow:0 2px 2px rgba(0,0,0,.15) inset; }
/* Button option */
.rounded { border-radius:6px; }
.pill { border-radius:50px; }
.sz_full { min-width:100px; max-width:100%; display:block; font-size:110%; padding:1em 1.5em .9em; }
.sz_l { min-width:350px; max-width:90%; font-size:110%; padding:.8em 1.5em .7em; }
@media screen and (max-width: 479px) {
  .sz_l { min-width:320px; max-width:95%; }
}
.sz_s { min-width:100px; max-width:90%; font-size:85%; padding:.4em 1em .3em; }
.bt_red{ background:#c01f0e; color:#fff; }
.bt_red:hover, .bt_red:focus { background-color:#d33929; color:#fff; }
.bt_yellow{ background:#f1c40f; color:#fff; }
.bt_yellow:hover, .bt_yellow:focus { background-color:#f9d441; color:#fff; }
.bt_blue{ background:#2980b9; color:#fff; }
.bt_blue:hover, .bt_blue:focus { background-color:#3a91c9; color:#fff; }
.bt_green{ background:#27ae60; color:#fff; }
.bt_green:hover, .bt_green:focus { background-color:#39c574; color:#fff; }

/* ----------------------------------------------------------------------

button - CSSボタンのスタイル

---------------------------------------------------------------------- */

.q_button{min-width:200px;max-width:90%;background-color:#535353; display:inline-block; vertical-align:middle; padding:.6em 1.3em .5em; font-weight:400; font-size:100%; color:#fff; margin:0; text-decoration:none; text-align:center; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; transition:all 0.3s ease-in-out 0s; box-shadow:0 1px 3px rgba(0,0,0,.15); }

.q_button:hover,.q_button:focus{text-decoration:none;color:#fff; background-color:#7d7d7d; box-shadow:0 2px 2px rgba(0,0,0,.15) inset; }

/* Button option */

.rounded{border-radius:6px;}

.pill{border-radius:50px;}

.sz_full{min-width:100px;max-width:100%;display:block;font-size:110%;padding:1em1.5em.9em;}

.sz_l{min-width:350px;max-width:90%;font-size:110%;padding:.8em1.5em.7em;}

@mediascreenand(max-width:479px){

.sz_l{min-width:320px;max-width:95%;}

}

.sz_s{min-width:100px;max-width:90%;font-size:85%;padding:.4em1em.3em;}

.bt_red{background:#c01f0e; color:#fff; }

.bt_red:hover,.bt_red:focus{background-color:#d33929; color:#fff; }

.bt_yellow{background:#f1c40f; color:#fff; }

.bt_yellow:hover,.bt_yellow:focus{background-color:#f9d441; color:#fff; }

.bt_blue{background:#2980b9; color:#fff; }

.bt_blue:hover,.bt_blue:focus{background-color:#3a91c9; color:#fff; }

.bt_green{background:#27ae60; color:#fff; }

.bt_green:hover,.bt_green:focus{background-color:#39c574; color:#fff; }

他にも

見出し
CSSボタン
テーブル
カードリンク
フォントサイズ
フォントカラー
背景色
配置
回り込み
画像リンクマウスオーバー時の不透明度
テキストスタイル
余白

など、CSSを定義しなおす必要がないくらい様々なCSSスタイルがテーマに組み込まれています。

次はフォントサイズのCSS機能について紹介します。

【ワードプレステーマChillに標準装備】便利すぎるCSSと表示サンプル – CSSボタン編

カスタマイズ不要！デフォルトCSSでできること

スタイルを選ぶだけ「CSSボタン」デザイン１２種以上！

3種類以上のスタイルを組み合わせ可能！

中央揃えや左寄せも自由自在

コメント

お知らせ

お知らせ