ボタン作り方
ボタンのつくりかた
ボタンデザイン
外部リンク参考サイトさん
固定ボタンのつくりかた
ボタンの位置
webページをスクロールしても同じ位置になるようにします
CSS
CSSの”positionプロパティ”を使用し、”値をfixed”にして表示位置を固定します。
上(top:)下(bottom:)
左(left:)右(right:)でボタンの位置を決める。
セレクタ{position:fixed; 位置}
”z-indexプロパティ”にてページの前面に表示させます
要素:hover{プロパティ名:値;} カーソルが乗ったときの状態。半透明表示を「opacity」など
HTML
Aタグとhref属性で、ページトップなど戻る位置にリンク設定をしてボタンを囲む。
<a href="#戻る位置">ボタン</a>
ボタンそのもののつくりかた
width:数値px; 幅を指定。
background:カラー名; ボタンの色を指定
ボタン文字設定
| font-size:数値px; | 文字サイズ設定 |
| font-weight:bold; | 太字設定 |
| text-decoration:none; | リンク下線を消す |
| text-align: center; | 中央配置 |
セレクタ{border-radius: 数値px}角を丸くする。
値が1つの場合は4つの角が全て同じ丸さになります。
外部リンク参考サイトさん
ボタンつくりかた
