submitをCSSでおしゃれに設定する方法を現役エンジニアが解説【初心者向け】

初心者向けにsubmitをCSSでおしゃれに設定する方法を現役エンジニアが解説しています。submitはHTMLのフォーム要素の部品になります。お問い合わせやメールフォーム画面をCSSでおしゃれにしておくとサイトの信頼度が向上します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

submitをCSSでおしゃれに設定する方法について解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

submitをCSSでおしゃれに設定する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

submitとは

入力フォームの「送信」や「投稿」を行うボタンのことです。

 

基本的なsubmitのコード

<form>
  <p><input type="text"></p>
  <p><input type="submit" value="送信する"></p>
</form>

 

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

おしゃれなsubmitボタンを設定してみる

submitボタンの装飾例をいくつかご紹介します。
 

例1:角を丸くしてみる

ボタンの角を丸くするには、border-radiusを設定します。
 

HTML

<form>
  <p><input type="text"></p>
  <p><input class="radius-percent-0" type="submit" value="送信する"></p>
  <p><input class="radius-percent-10" type="submit" value="送信する"></p>
  <p><input class="radius-percent-20" type="submit" value="送信する"></p>
  <p><input class="radius-percent-30" type="submit" value="送信する"></p>
  <p><input type="text"></p>
  <p><input class="radius-pixel-0" type="submit" value="送信する"></p>
  <p><input class="radius-pixel-10" type="submit" value="送信する"></p>
  <p><input class="radius-pixel-20" type="submit" value="送信する"></p>
  <p><input class="radius-pixel-30" type="submit" value="送信する"></p>
</form>

 

CSS

.radius-percent-0 {
  border-radius: 0%;
}

.radius-percent-10 {
  border-radius: 10%;
}

.radius-percent-20 {
  border-radius: 20%;
}

.radius-percent-30 {
  border-radius: 30%;
}

.radius-pixel-0 {
  border-radius: 0px;
}

.radius-pixel-10 {
  border-radius: 10px;
}

.radius-pixel-20 {
  border-radius: 20px;
}

.radius-pixel-30 {
  border-radius: 30px;
}

 

 

例2:影を付けてみる

ボタンに影を付けるには、box-shadowを設定します。X軸方向、Y軸方向、ぼかし具合、色を設定します。
 

HTML

<form>
  <p><input type="text"></p>
  <p><input class="shadow-1" type="submit" value="送信する"></p>
  <p><input class="shadow-2" type="submit" value="送信する"></p>
  <p><input class="shadow-3" type="submit" value="送信する"></p>
  <p><input class="shadow-4" type="submit" value="送信する"></p>
</form>

 

CSS

.shadow-1 {
  box-shadow: 3px 0px 0px black;
}

.shadow-2 {
  box-shadow: 0px 3px 0px blue;
}

.shadow-3 {
  box-shadow: 0px 0px 3px red;
}

.shadow-4 {
  box-shadow: 3px 3px 3px gray;
}

 

 

例3:立体的にしてみる

ボタンに下線を追加することで立体感を出すことができます。前述のbox-shadowで影を追加すると、より立体感が出てきます。
 

HTML

<form>
  <p><input type="text"></p>
  <p><input class="btn-3d" type="submit" value="送信する"></p>
  <p><input class="btn-3d-shadow" type="submit" value="送信する"></p>
</form>

 

CSS

.btn-3d {
  border-bottom: solid 3px gray;
  border-radius: 3px;
}

.btn-3d-shadow {
  border-bottom: solid 3px gray;
  border-radius: 3px;
  box-shadow: 0px 3px 5px lightgray;
}

 

 

例4:hover:で背景色を変えてみる

:hover擬似クラスを使うことでマウスカーソルが乗ったときの色を変えることができます。色の変化をゆっくりにしたい場合は、transitionで変化にかかる時間を指定するとよいでしょう。

 

HTML

<form>
  <p><input type="text"></p>
  <p><input class="hover" type="submit" value="送信する"></p>
  <p><input class="hover-transition" type="submit" value="送信する"></p>
</form>

 

CSS

.hover {
  background-color: white;
  font-size: 11px;
  border-radius: 5px;
}

.hover:hover {
  background-color: yellow;
  font-size: 11px;
  border-radius: 5px;
}

.hover-transition {
  background-color: white;
  font-size: 11px;
  border-radius: 5px;
  transition: 1s;
}

.hover-transition:hover {
  background-color: yellow;
  font-size: 11px;
  border-radius: 5px;
}

 

例5:クリックしたときにへこむようにしてみる

transformで縦方向に動かすことで、クリックしたときにあたかもボタンがへこんだように見せることができます。
 

HTML

<form>
  <p><input type="text"></p>
  <p><input class="click-down" type="submit" value="送信する"></p>
</form>

 

CSS

.click-down {
  transition: 0.2s;
}

.click-down:active {
  transform: translateY(2px);
}

 

 

例1から5のまとめ

例1から5を組み合わせるとこのようになります。
 

HTML

<form>
  <p><input type="text"></p>
  <p><input class="decorated-btn click-down" type="submit" value="送信する"></p>
</form>

 

CSS

.decorated-btn {
  background-color: gold;
  font-size: 12px;
  border-radius: 5px;
  border-bottom: solid 3px goldenrod;
  box-shadow: 3px 3px 3px gray;
  transition: 0.3s;
}

.click-down:active {
  transform: translateY(2px);
  border-bottom: none;
}

.decorated-btn:hover {
  background-color: orange;
}

 

 

この記事を監修してくれた方

メンター稲員さん。
フリーランスエンジニア。
大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。

経験言語:Ruby,Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript、Node.js。
おうち大好きマンです。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

オンラインのプログラミングスクールTechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間で習得することが可能です。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。