<button>タグを使用してボタンを作る。
①基本的なボタン
まずは最小限の記述でボタンを作成してみましょう。
HTML
<button>ボタン</button>
これだけの記述でボタンを作ることができます。
②CSSで装飾(影付き、角丸、マウスオンで色変更)
それではCSSを使って簡単にボタンを装飾してみましょう。
HTML
<button class="button1" type="button">ボタン</button>
CSS
.button1 { width: 200px; /*ボタンの幅*/ height: 40px; /*ボタンの高さ*/ background-color: #4793f0; /*ボタンの背景色*/ color: #ffffff; /*文字の色*/ font-size: 20px; /*文字のサイズ*/ font-weight: normal; /*文字の太さ*/ border-radius: 5px; /*角丸の半径*/ box-shadow: 2px 2px 4px 0px #000000; /*影の大きさ、ぼかし、広がり、色*/ border: none; /*ボタンの枠線*/ outline: none; /*クリック時の枠線なし*/ transition: 0.3s; /*なめらかに反転*/ } .button1:hover { background-color: #68abfd; /*マウスオン時の背景色*/ color: #ffffff; /*マウスオン時の文字の色*/ cursor: pointer; /*マウスオン時に手のカーソル*/ } .button1:active { transform: translate(0,1px); /*クリック時の動作*/ }
③ボタンのカスタマイズ CSSを自動生成します。
属性 | 説明 | 値 | 注釈 |
width | 横幅を指定 | px | |
height | 高さを指定 | px | |
background-color | ボタンの色 | ||
color | 文字の色 | ||
font-size | 文字サイズ | px | |
font-weight | 文字の太さ | normal(標準) bold(太字) | |
border-radius | 角丸の半径 | px | |
box-shadow | 影の設定 |
横距離
px 縦距離 px ぼかし px 広がり px 影の色 |
|
マウスオン(hover) background-color |
ボタンの色 | ||
マウスオン(hover) color |
文字の色 | ||
カスタマイズされたCSS
.button1 { width: 200px; height: 40px; background-color: #4793f0; color: #ffffff; font-size: 20px; font-weight: normal; border-radius: 5px; box-shadow: 2px 2px 4px 0px #000000; border: none; outline: none; transition: 0.3s; } .button1:hover { background-color: #68abfd; color: #ffffff; cursor: pointer; } .button1:active { transform: translate(0,1px); }
実際にボタンを設置する場合の、実用的で簡単シンプルなボタンの作り方をご紹介しましたが、
他にも色々と細かな設定項目があります。
④JavaScript
onClick属性を使ってリンクボタン、戻るボタンを作る。
buttonタグの中に以下の記述を追加することで、「リンク先URL」に遷移させることができます。
onclick="location.href='リンク先のURL'"
HTML
<button class="button1" type="button" onclick="location.href='https://color.ty-factory.com'">COLOR CODE</button>
別ウィンドウ(新しいタブ)でリンク先を開くには、onClick属性にwindow.open()を追加します。
onclick="window.open().location.href='リンク先のURL'"
HTML
<button class="button1" type="button" onclick="window.open().location.href='https://color.ty-factory.com'">COLOR CODE</button>
※buttonタグをaタグで囲んでリンクを張ることは、HTMLとしては正しくありません。
ブラウザによっては動作するかもしれませんが、バグの原因にもなりますのでlocation.hrefを使用しましょう。
HTML(正しくないリンク方法)
<a href="リンク先URL"> <button class="button1">リンクボタン</button> </a>
戻るボタンを作るときはonclick属性にhistory.back()を記述します。
onclick="history.back()"
HTML
<button class="button1" type="button" onclick="history.back()">戻る</button>