CSSを使用して送信ボタンをパーソナライズする

更新された：

はじめに

CSSを利用してSubmitボタンをカスタマイズすることに興味がありますか？このチュートリアルでは、送信ボタンの外観を変更するためにCSSの機能を利用する実践的な例を紹介します。

このチュートリアルでは、フォームの作成については触れません。フォームの作成についてガイダンスが必要な場合は、この有益なガイドを参照してください。

CSSは初めてですか？WPBeginnerの友人は、優れた定義と有用な例を提供しています。彼らの有益な用語集ページで、このトピックについてもっと知ってください。

このチュートリアルのすべての例では、すべてのフォームのボタンを変更する CSS を提供しますが、個別のフォームのボタンも提供します。

ウェブサイトにCSSを組み込む方法については、このチュートリアルを参照してください。フォームIDの見つけ方については、こちらのチュートリアルを参照してください。

全角ボタン

この例では、送信ボタンとフォームフィールドの幅を一致させることを目的としています。そのために、以下のCSSを適用します。

単一フォームの場合

この例では、IDが23のフォームだけを対象にしている。

button#wpforms-submit-23 {
    width: 100%;
}

すべてのフォーム

この例はすべてのWPFormsを対象としています。

button.wpforms-submit {
    width: 100% !important;
}

単一のフォームに対する押されたボタンの効果

以下のCSSを使って、ボタンがクリックされたときに押し下げられたように見えるようにする。

単一のフォームの場合

この例では、IDが23のフォームだけを対象にしている。

button#wpforms-submit-23 {
  display: inline-block;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #b95d52;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

button#wpforms-submit-23:hover {
	background-color: #55555e;
}

button#wpforms-submit-23:active {
  background-color: #55555e;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

すべてのフォーム

この例はすべてのWPFormsを対象としています。

button.wpforms-submit {
  display: inline-block !important;
  font-size: 24px !important;
  cursor: pointer !important;
  text-align: center !important;
  text-decoration: none !important;
  outline: none !important;
  color: #fff !important;
  background-color: #b95d52 !important;
  border: none !important;
  border-radius: 15px !important;
  box-shadow: 0 9px #999 !important;
}

button.wpforms-submit:hover {
	background-color: #55555e !important;
}

button.wpforms-submit:active {
  background-color: #55555e !important;
  box-shadow: 0 5px #666 !important;
  transform: translateY(4px) !important;
}

このCSSは、クリックされたときに送信ボタンが押し下げられたように見えるようにする。

2行のテキストで送信

この例では、2行のテキストを含むボタンを作成します。

単一のフォームの場合

この例では、IDが23のフォームだけを対象にしている。

button#wpforms-submit-23 {
    max-width: 20%;
    line-height: 1.2em;
    height: auto;
}

すべてのフォーム

この例はすべてのWPFormsを対象としています。

button.wpforms-submit {
    max-width: 20% !important;
    line-height: 1.2em !important;
    height: auto !important;
}

このCSSを使えば、送信ボタンを2行のテキストの上に表示させることができます。

ホバー時のアニメーション

この例では、ホバー時の二重矢印を content: '\00bb'; をCSSに追加してください。シンボルに適切なHTMLコードを見つけるための詳細については、こちらをご覧ください、 W3C Schoolsのドキュメントを参照してください。.

このアイコンは、このチュートリアルにあるようなフォントベースのアイコンに変更することができます。

単一のフォームの場合

この例では、IDが23のフォームだけを対象にしている。 

button#wpforms-submit-23 {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

button#wpforms-submit-23:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 11px;
  right: 0;
  transition: 0.5s;
}

button#wpforms-submit-23:hover {
  padding-right: 25px;
}

button#wpforms-submit-23:hover:after {
  opacity: 1;
  right: 50px;
}

すべてのフォーム

この例はすべてのWPFormsを対象としています。

button.wpforms-submit {
  border-radius: 4px !important;
  border: none !important;
  color: #FFFFFF !important;
  text-align: center !important;
  width: 200px !important;
  transition: all 0.5s !important;
  cursor: pointer !important;
  margin: 5px !important;
  cursor: pointer !important;
  display: inline-block !important;
  position: relative !important;
  transition: 0.5s !important;
}

button.wpforms-submit:after {
  content: '\00bb' !important;
  position: absolute !important;
  opacity: 0 !important;
  top: 11px !important;
  right: 0 !important;
  transition: 0.5s !important;
}

button.wpforms-submit:hover {
  padding-right: 25px !important;
}

button.wpforms-submit:hover:after {
  opacity: 1 !important;
  right: 50px !important;
}

このCSSは、ボタンにカーソルを合わせたときにアニメーション効果を与えます。

色を変える

この例では、ボタンの色を変更します。また、この例では文字サイズ、文字色、font-familyも変更します。

単一のフォームの場合

この例では、IDが23のフォームだけを対象にしている。

button#wpforms-submit-23 {
    font-family: roboto;
    font-size: 22px;
    background-color: #b95d52;
    text-transform: uppercase;
    color: #ffffff;
    box-shadow: unset;
    border: 1px solid transparent;
    background: unset;
    background-color: #b95d52;
}

button#wpforms-submit-23:hover {
    background-color: #ffffff;
    border: 1px solid #b95d52;
    opacity: 1;
    color: #b95d52;
}

すべてのフォーム

この例はすべてのWPFormsを対象としています。

button.wpforms-submit {
    font-family: roboto !important;
    font-size: 22px !important;
    background-color: #b95d52;
    text-transform: uppercase;
    color: #ffffff !important;
    box-shadow: unset !important;
    border: 1px solid transparent !important;
    background: unset !important;
    background-color: #b95d52 !important;
}

button.wpforms-submit:hover {
    background-color: #ffffff !important;
    border: 1px solid #b95d52 !important;
    opacity: 1 !important;
    color: #b95d52 !important;
}

この例のボタンは、テキストの色、背景色、フォントサイズ、フォントファミリ、全角文字を変更しています。

ボックスシャドウボタン

この例では、以下のCSSを使ってボタンにボックスシャドウを付ける方法を紹介する。

単一のフォームの場合

この例では、IDが23のフォームだけを対象にしている。

button#wpforms-submit-23 {
  background-color: #b95d52;
  border: none;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

あるいは、このCSSをフォームに使用して、ホバー時にのみボックスシャドウを表示することもできます。 

button#wpforms-submit-23 {
  background-color: #b95d52;
  border: none;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

button#wpforms-submit-23:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

すべてのフォーム

この例はすべてのWPFormsを対象としています。

button#wpforms-submit-23 {
  background-color: #b95d52;
  border: none;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

また、上の例と同じように、ホバー時にのみボックス・シャドウを付けることもできる。 

button.wpforms-submit {
    background-color: #b95d52 !important;
    border: none !important;
    color: white !important;
    padding: 10px 30px !important;
    text-align: center;
    text-decoration: none !important;
    display: inline-block;
    font-size: 16px !important;
    margin: 4px 2px !important;
    cursor: pointer !important;
    -webkit-transition-duration: 0.4s !important;
    transition-duration: 0.4s !important;
}

button.wpforms-submit:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19) !important;
}

このCSSの例では、ボタンにボックスシャドウを表示しています。

これらは、CSSを使って送信ボタンをパーソナライズするのがいかに簡単かのほんの一例に過ぎません。フォームラベルもパーソナライズしたいですか?フォームラベルの前後に画像を追加する方法をご覧ください。

よくあるご質問

Q: このCSSを改ページボタンにも使えますか？

A: Absolutely, to use any of these examples with standard buttons when using the Page Breakbutton.wpforms-page-button.

あるいは、単一のフォームだけをターゲットにしたい場合は form#wpforms-form-3221 button.wpforms-page-buttonCSSクラスの代わりに、フォームIDを自分のフォームIDに合わせて更新することを忘れないでください。

例えば、上に示したSubmitボタンのホバー時のアニメーションの例と同じように、改ページボタンも同じようにします。

このCSSは特定のフォーム（フォームID3221）用です。このCSSを単一のフォームに適用したい場合は、3221をあなたのフォームIDに合わせて更新する必要があります。フォームIDの見つけ方については、便利なドキュメントをご覧ください。 

form#wpforms-form-3221 button.wpforms-page-button {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
 
form#wpforms-form-3221 button.wpforms-page-button:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 11px;
  right: 0;
  transition: 0.5s;
}
 
form#wpforms-form-3221 button.wpforms-page-button:hover {
  padding-right: 25px;
}
 
form#wpforms-form-3221 button.wpforms-page-button:hover:after {
  opacity: 1;
  right: 50px;
}

このCSSはすべてのフォームに適用される。

button.wpforms-page-button {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
 
button.wpforms-page-button:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 11px;
  right: 0;
  transition: 0.5s;
}
 
button.wpforms-page-button:hover {
  padding-right: 25px;
}
 
button.wpforms-page-button:hover:after {
  opacity: 1;
  right: 50px;
}

改ページボタンを変更する例を以下に示します。

Tagged
まだ行き詰まっていますか？ 何かお手伝いできることはありますか？
最終更新日：2023年8月29日