CSS を使用したスタイル入力と送信ボタン
送信ボタンは、データをフォームに送信するために使用されるボタンの一種です。 通常、他のすべてのフィールドが入力された後、フォームの最後に配置されます。 送信ボタンがクリックされると、処理のためにフォームがサーバーに送信されます。
送信ボタンの構文は HTML の他のボタンと似ていますが、タイプは submit である必要があります。 この記事では、CSS を使用して HTML の入力ボタンと送信ボタンのスタイルを設定する方法を説明します。
HTML で送信ボタンを作成する
送信ボタンを作成するには、2つの方法があります。 最初の方法は、<input> タグを type="submit" 属性とともに使用することです。
これにより、クリックするとフォームが送信されるボタンが作成されます。
<button type='submit'>
2 番目の方法は、 <button> タグを使用することです。 これにより、HTML でカスタマイズできるボタンが作成されます。
<button> タグを使用して、フォームを送信したり、JavaScript 関数をトリガーしたりできます。
<input type="submit" value="Submit"/>
HTML で入力ボタンを作成する
入力ボタンは、ユーザーがクリックしてアクションを選択できる単純なコントロールです。 button に設定された type 属性を持つ <input> 要素で入力ボタンを作成できます。
<input type="button" value="Click me!">
ユーザーがボタンをクリックすると、ボタンに関連付けられたアクションが実行されます。 ほとんどの場合、アクションは JavaScript イベント ハンドラーの形式で定義されます。 たとえば、クリックしたときに警告メッセージを表示するボタンを定義できます。
<input type="button" value="Click me!" onclick="alert('Hello world!')">
value 属性に加えて、label 属性を使用してボタンのラベルを設定することもできます。
例えば
<input type="button" value="Click me!" label="Hello world!">
CSS を利用して入力ボタンのスタイルを設定することもできます。 たとえば、ボタンの width、height、color などを設定できます。
CSS を使用したスタイル入力と送信ボタン
CSS を使用して入力ボタンと送信ボタンをスタイリングする場合、デザインの一貫性を維持するために、同じサイズ、配色、その他すべてのスタイリング プロパティを選択する必要があります。
CSSで入力ボタンをスタイリングする
入力ボタンは、Web ページやアプリケーションの基本要素です。 ユーザーが情報を送信したり、アクションを実行したりできるようにし、ブラウザのデフォルト スタイルを使用してスタイル設定します。 ただし、CSS を使用してデフォルトのスタイルをオーバーライドできます。
CSS を使用して入力ボタンのスタイルを設定するには、いくつかの方法があります。 最も一般的な方法は、CSS pseudo-classes: hover、:active、および :focus を使用することです。 これらの 疑似クラス は、ユーザーがボタンの上にカーソルを置いたり、クリックしたり、ボタンにフォーカスを合わせたりすると、ボタンのスタイルを変更します。
入力ボタンのスタイルを設定するもう 1つの方法は、CSS3 プロパティ box-shadow と border-radius を使用することです。 これらのプロパティを使用すると、ボタンの周りに影を追加したり、ボタンを丸くしたりできます。
最後に、CSS3 プロパティ transform を使用して、ボタンを 拡大縮小、回転、または 歪曲 できます。 これにより、ユーザーがボタンの上にカーソルを置いたときにボタンが大きくなるなど、刺激的な効果を生み出すことができます。
これらの方法はすべて、ユニークでスタイリッシュな入力ボタンを作成するために使用できます。
CSSで送信ボタンをスタイリングする
利用可能な CSS プロパティを使用して送信ボタンのスタイルを設定する 1つの方法。 これは、Web サイトの全体的なスタイルにマッチするユニークな外観をボタンに与える理想的な方法です。
もう 1つの方法は、ボタンのコンテナーのスタイルを設定することです。これにより、ボタンの全体的な外観をより詳細に制御できます。 これは、背景画像やその他の要素をボタンに追加する場合に利用できます。
コード例
<!DOCTYPE html>
<html>
<head>
<style>
input[type="submit"] {
position: absolute;
top: 65%;
left: 25%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #f1f1f1;
color: black;
font-size: 16px;
padding: 16px 30px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
border: 2px solid #4caf50; /* Green */
box-shadow: 0 7px 16px 0 rgba(0, 0, 0, 0.4), 0 6px 21px 0 rgba(0, 0, 0, 0.19);
}
input[type="submit"]:hover {
background-color: #4caf50; /* Green */
color: white;
}
input[type="text"] {
width: 40%;
padding: 14px 30px;
margin: 9px 0;
box-sizing: border-box;
}
input[type="textarea"] {
padding: 36px 40px;
}
</style>
</head>
<body>
<h2>Styling form buttons</h2>
<div class="form-center">
<form action="#" method="post">
Name <input type="text" placeholder="Full name" />
<br />
Email <input type="text" placeholder="Email address" />
<br />
Date <input type="text" placeholder="Date" />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>
まとめ
送信ボタンと入力フィールドはどちらも要素です。 違いは、入力フィールドはデータ入力を示すために使用されるのに対し、送信ボタンはデータをフォームに送信するために使用できることです。 さらに、ボタンの見た目を美しくするために、border-radius プロパティを使用して視覚効果を作成することもできます。
たとえば、これを使用して、クリックするとページに押し下げられたように見えるボタンを作成し、CSS を使用してさらに多くのデザイン トリックを行うことができます。
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn