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

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

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

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

 

 

submitとは

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

 

基本的なsubmitのコード

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

 

 

[PR] Webデザインで副業する学習方法を動画で公開中

おしゃれな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では、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。