HTMLとCSSでボタンのスタイルを設定する

1.まず初めに、HTMLファイルにボタンを追加します。最も簡単な方法は、<a>タグを使用することです。次のようにコードを書きます。

<a class="button1" href="#">ここにボタンのテキストを書きます</a>

screenshot1

2.style.cssのファイルで、背景色、幅、パディングなどボタンのスタイルを設定します。

例:

.button1{
    background:#000000;
    padding:5px;
}

3.マウスを重ねた時のスタイル設定も同様の方法で行います。設定する時は、CSSファイル内に”.ボタンのクラス名:hover”を加えます。

.button1:hover{
    background:#FF0000;
    padding:5px;
}

screenshot2

4.HTMLファイルと、CSSファイルをそれぞれ保存し、htmlファイルを開き、ブラウザでプレビューして確認します。


Comments are closed.