Ryo Blog

〜WEB制作をスキルに〜

【お問い合わせ】No.6 送信ボタンをカスタマイズしよう！

2023.11.09

こんなことを説明しています！

送信ボタンのカスタマイズ方法
ブラウザごとにデフォルトで決まっているものが多いのでそれを初期化するコード
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": "擬似要素で矢印を作る"
},

記事一覧へ

りょー｜29歳フリーランス｜LPコーディング、WordPressサイト構築、ディレクション、Shopify (Liquid編集) を中心に活動しております！

完全未経験からWEB業界に入り
デイトラで3ヶ月間学習
営業開始後4日→ゼロイチ達成
開業3ヶ月後→月収50万達成
その後平均月収50万 (最高月収120万円)

WEBで独立したい！未経験からでもフリーランスになりたい！そんな方々のためになるような情報をこのブログを通して発信します！

私がWEB制作フリーランスとして独立するために学習したオンラインスクール「デイトラ」の詳細リンクはこちら↓↓

Products

Coming Soon

HP制作のご依頼

現在エンドクライアント様向けの事業サイトを作成中です。

WEB制作業務委託
のご依頼

LPコーディング、WordPress構築、Shopify構築、Liquid編集業務承ります！約1年間で80サイト以上作成をしてきました。LP制作最短2日で納品！
詳しくは、ポートフォリオをご覧ください。

コンテンツ

Ryo'Portfolio裏側徹底解説、レスポンシブほぼ不要のコーディング方法、実務必須のやや難しい実装解説、見積もりからコーディング、納品までの最初から最後まで全部見せます解説動画、等々「学習終わったけど実務が不安」という人に向けた「実務のお守り」のようなコンテンツを現在作成中です。

カートにアイテムが追加されました

Ryo Blog

【お問い合わせ】No.6 送信ボタンをカスタマイズしよう！

解説動画

コードの解説

HTMLの記述

ポイント/手順

CSSの記述

ポイント/手順

解説で使用したスニペット

Category

Tag

X

Youtube

About

Products