HTMLボタンタグのスタイルを設定するにはどうすればよいですか? HTMLボタンタグのスタイルの紹介

寻∝梦
リリース: 2018-09-03 17:12:39
オリジナル
22226 人が閲覧しました

この記事では、HTML ボタン タグのスタイル設定と、HTML ボタン タグの美化スタイルを主に紹介します

まず、HTML のラベル スタイル設定について説明します。

通常のボタンの設定:

input要素のtype属性を「button」に設定して通常のボタンを作成します。ボタンに表示されるテキストは、value 属性の値です。value 属性が指定されていない場合は、空のボタンが作成されます。例:

<input type="button" value="立即购买">
ログイン後にコピー

HTMLボタンタグのスタイルを設定するにはどうすればよいですか? HTMLボタンタグのスタイルの紹介

効果は明ら​​かで、これがデフォルトの通常ボタン設定です。

デフォルトでは、通常のボタンをクリックしても何も起こりません。したがって、通常のボタンのイベントを登録し、対応するハンドラー関数を手動で記述する必要があります。上記のボタンをクリックしたときにフォームを送信したい場合は、ボタンの onClick イベントを登録する必要があります。例:

<form name="buy" action="form.html" method="post">
    <button onClick="submitForm(buy)">立即购买</button>
</form>
ログイン後にコピー

ここでボタンをクリックすると、onClick イベントがトリガーされ、イベント処理関数 submitForm(buy) が呼び出されます。パラメーター buy は、処理されるフォームの name 属性の値です。ボタンをクリックした後にフォームを送信したい場合は、イベント ハンドラー関数でフォーム オブジェクトの submit() メソッドを呼び出すことができます。


function submitForm(f) {
    f.submit();  
}
ログイン後にコピー

これはデフォルトの設定です。次に、スタイルの設定を見てみましょう。 HTML ボタン タグの場合:

完全なコード例を示します:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
.div {
    display: inline-block;
    padding: .3em .5em;
    background-image: linear-gradient(#ddd, #bbb);
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3em;
    box-shadow: 0 1px white inset;
    text-align: center;
    text-shadow: 0 1px 1px black;
    color:white;
    font-weight: bold;
}
.div:active{
    box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
    border-color: rgba(0,0,0,.3);
    background: #bbb;
}
</style>
</head>
<body>
<div class="div">Button</div>
</body>
</html>
ログイン後にコピー

この効果は図に示すとおりです:

HTMLボタンタグのスタイルを設定するにはどうすればよいですか? HTMLボタンタグのスタイルの紹介

この効果は非常に明白ではないでしょうか?デフォルトよりもはるかに良く見えます。js を学ぶまで待ってください。js テクノロジーを使用してデフォルトのボタンをより美しくすることもできます。

上記は HTML ボタン タグのスタイル設定と美化スタイルの概要です (さらに詳しく知りたい場合は、PHP 中国語 Web サイトにアクセスしてください)。以下に質問してください。

【編集者のおすすめ】

HTMLドロップダウンメニューの作り方は? HTMLドロップダウンメニューのコード例の紹介

HTMLラジオボタンをデフォルトで選択させるにはどうすればいいですか? inputタグのラジオボタン使用例

以上がHTMLボタンタグのスタイルを設定するにはどうすればよいですか? HTMLボタンタグのスタイルの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート