2022年3月27日 / 最終更新日時 : 2022年3月28日 info@rishuntrading.co.jp

<input type=”submit”>に疑似要素を適用したい。

「各種ボタン」などは、装飾のため矢印(>)、画像やアイコンなどを付ける事が多々あるかと思います。そのために、該当ボタンのタグの疑似要素(:before/:after)を使ってボタンの上に設置します。

<a>タグなどは、疑似要素で設置できるものの、<input>タグは疑似要素が使えません。

そのため、｢お問い合わせフォーム｣の｢送信｣ボタンなどに使われる<input type=”submit” >のようなボタンには、そのままでは装飾ができません。

では、どうすればできるのかというご紹介となります。

<input>タグでは疑似要素が使えない
同様に<a>タグの場合
解決策

<input>タグでは疑似要素が使えない

<input type=”submit”>の:afterの疑似要素に、fontawesomeの”“のアイコンを設置していますが、利用できません。【fontawesome】についてはこちらを参照。

HTML文

 <input type="submit" value="ボタンのテスト" />

1	<input type="submit" value="ボタンのテスト" />

CSS文

input[type="submit"]{
    width:250px;
    height:50px;
    color: #fff;
    background: #6495ED;
    outline:none;
    border:none;
    box-shadow: 3px 3px 3px #c0c7d9;
    font-size:16px;
}
input[type="submit"]:after{
    content: "\f054";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s;
}

input[type="submit"]{

width:250px;

height:50px;

color: #fff;

background: #6495ED;

outline:none;

border:none;

box-shadow: 3px 3px 3px #c0c7d9;

font-size:16px;

}

input[type="submit"]:after{

content: "\f054";

font-weight: 900;

font-family: "Font Awesome 5 Free";

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

display: inline-block;

font-style: normal;

font-variant: normal;

text-rendering: auto;

line-height: 1;

position: absolute;

right: 10%;

top: 50%;

transform: translateY(-50%);

transition: all 0.3s;

}

同様に<a>タグの場合

<a>タグでは疑似要素が使えるので、fontawesomeのアイコンが設置可能。

ボタンテスト

HTML文

<a href="#"><span>ボタンテスト</span></a>

1	<a href="#"><span>ボタンテスト</span></a>

CSS文

a{
    width:250px;
    height:50px;
    color:#fff;
    background:#6495ED;
    text-decoration:none;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    transition:all 0.3s;
    overflow:hidden;
    box-shadow:3px 3px 3px #c0c7d9;
}
a:after{
    content: "\f054";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position:absolute;
    right:10%;
    top:50%;
    transform:translateY(-50%);
    transition:all 0.3s;
}

width:250px;

height:50px;

color:#fff;

background:#6495ED;

text-decoration:none;

display:flex;

justify-content:center;

align-items:center;

position:relative;

transition:all 0.3s;

overflow:hidden;

box-shadow:3px 3px 3px #c0c7d9;

}

a:after{

content: "\f054";

font-weight: 900;

font-family: "Font Awesome 5 Free";

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

display: inline-block;

font-style: normal;

font-variant: normal;

text-rendering: auto;

line-height: 1;

position:absolute;

right:10%;

top:50%;

transform:translateY(-50%);

transition:all 0.3s;

}

解決策

<input type=”submit” />を<div>で括り、<div>の疑似要素で設置して上げれば良いです。

HTML文

<div class="submit-btn-wrap">
  <input type="submit" value="ボタンのテスト" />
</div>

</div>

CSS文

.submit-btn-wrap{
    display:inline-block;
    position:relative;
    transition:all 0.3s;
}
.submit-btn-wrap:after{
    content: "\f054";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s;
    color:#fff;
}
.submit-btn-wrap:hover::after{
    right:5%;
}