デイトラWeb制作コース中級編DAY15 ボタン、見出しを自在に作れるようになる②

button01

まずはプレーンなタイプから。言葉で説明するよりコードを貼った方が早いのでそうします。これをスニペット登録しておけば後々カスタムして使えますね。

.button01 {
min-width: 230px;
font-size: 16px;
font-weight: 700;
display: inline-block;
padding: 15px 16px;
margin: 0 0 1em;
background-image: none;
background-color: $color-main;
color: #fff;
text-decoration: none;
border: none;
border-radius: 3;
cursor: pointer;
-webkit-appearance: none;
position: relative;
}

【重要】button02

基本的には01と同じです。擬似要素とposition、transformを使って右側に矢印をつけます。

【重要】button03

02と似てますが今度は擬似要素display: inline-block;を使います。vertical-align: middle;で矢印を真ん中に持ってきます。

button04

下方向にだけ影をつけます。box-shadowについてはエイじーさんのブログが詳しいです。

paddingなどのショートハンドと同じかと思ってたけど違いました。勉強になりました！

ジェネレーターをいじってみるとイメージがつかみやすいかと思います。

button05

最近はあまり見かけませんが、グラデーションも定番ですね。linear-gradient関数で指定します。

button06

こういう透けたようなデザインのボタンをゴーストボタンというんだそうです。作り方に関してはondoの大谷さんのブログが詳しいです。

button07

まんまるのボタンですね。これは他の装飾にも応用が効きそうです。widthとheightで正方形を作ってそこにborder-radius: 50%;で丸を描くというイメージです。

button08

かなり角が丸いボタン。近年よく見かけますね。02をベースとして角をborder-radiusで丸めてあげれば完成です。

button09

04と似てますが、こちらはborder-bottomを使った例です。角丸がない点に注意。

これにて見出しとボタンのコーディングノック終了です。次回はニュース系のコーディングです。