【お問い合わせ】No.6 送信ボタンをカスタマイズしよう!
Share
こんなことを説明しています!
- 送信ボタンのカスタマイズ方法
- ブラウザごとにデフォルトで決まっているものが多いのでそれを初期化するコード
- wpのプラグインにも対応できる型で作成
- 矢印が入っていてホバー時変わる場合の実装(inputに擬似要素は不可!!)
解説動画
コードの解説
前回までのコードや解説はこちら
HTMLの記述
<div class="row jc-center"> <div class="submit-wrap"> <input type="submit" value="送信する"> </div> </div>
ポイント/手順
- buttonタグでも良いが、wpのプラグインなどはinput[type="submit"]なので、移行した時に対応しやすいように、それに合わせておく
- valueで送信ボタン内のテキストを指定
- 後から擬似要素で矢印をつけるため、wrapで囲う。
(select同様、inputにも擬似要素をつけることができない)
CSSの記述
//====================== // 今回のテーマ //====================== //ブラウザによって異なるデフォルト設定を初期化 input[type="submit"], input[type="button"] { border-radius: 0px; -webkit-box-sizing: content-box; -webkit-appearance: button; appearance: button; border: none; box-sizing: border-box; cursor: pointer; background: transparent; } input[type="submit"]::-webkit-search-decoration, input[type="button"]::-webkit-search-decoration { display: none; } //ボタンを中央寄せに(ケースによる) .row.jc-center { justify-content: center; } //inputには擬似要素をつけられないのでwrapで囲って対応 .submit-wrap { input[type=submit] { padding: 20px 60px; font-size: 20px; border: 1px solid #000; transition: all 0.3s ease; } position: relative; &::after { content: ''; position: absolute; width: 10px; height: auto; aspect-ratio: 1; border-right: 1px solid #000; border-bottom: 1px solid #000; //配置, 回転 top: 50%; transform: translateY(-50%) rotate(-45deg); right: 20px; transition: all 0.3s ease; pointer-events: none; } //ホバー時 &:hover { input[type=submit] { background: #000; color: #fff; } &::after { border-right: 1px solid #fff; border-bottom: 1px solid #fff; } } }
ポイント/手順
- デフォルト設定を初期化(コードストック必須)
- 動画で使用したアプリ(Mac専用)のPasteアプリはこちら
- inputには擬似要素がつかないので、submit-wrapで囲って擬似要素をつける
- 矢印の部分がinputより上に来てしまい、inputが反応しないので、
pointer-event: none;をつけておく (selectのときと同様) - selectの解説はこちら
解説で使用したスニペット
scss.json
"top50": { "prefix": "top-50%", "body": [ "top: 50%;", "transform: translateY(-50%);", ], "description": "縦中央揃え" }, "after-arrow": { "prefix": "after-arrow", "body": [ "&::after {", " content: '';", " position: absolute;", " width: $1;", " height: auto;", " aspect-ratio: 1;", " border-right: $2px solid $3;", " border-bottom: $2px solid $3;", " //配置, 回転", " $5", "}", ], "description": "擬似要素で矢印を作る" },