こんな人に読んで欲しい！
・サイトの基本中の基本「クリックボタン」の作り方を知りたい人
こんにちは、「なゆた」です！
今回は皆さんに、Webサイトの基本中の基本「クリックボタン」の作り方をお教えします！
作成方法については、「リンクアイコン」と少々似ています。
①まずはHTMLファイルを作ります。mainタグ内に、sectionタグとリンク（a）付きpタグを入れます。リンクを意味するaタグの中には、リンク先のアドレスを入れることをオススメします。どうしてもアドレスが分からなかったら「#」記号だけでもOKです。それが出来たら、CSSファイルと連携しましょう！
②次からはCSSファイルでの作業です。「main .styleWrap .btn」と打って、その中に幅と高さを入れます。「.（ドット）」はclass属性を意味していて、タグが３つ連続で入力しているのは、「タグの中の中」を意味します。
③「main .styleWrap .btn」をさらに深掘りし、「a」を付け加えます。「a」を加えることによって、ボタンが可視化します。border-radiusを打つと、四角が角丸になります。box-shadowはボタンの影を表します。（※深掘り前のタグは絶対に消さないでください。）
④さらにまた深掘りし、「:hover」を付け加えます。hoverは、ボタンにカーソルを合わせた時の変化を表します。ここには、backgroundで変わった後の色だけを設定しましょう。
完成です！！
カーソルを合わせると、こうなります♪
いかがでしたか？基本中の基本と呼ばれる「クリックボタン」の作り方、ぜひ皆さんも参考にしてみて下さい！いつかきっと、役に立ちますよ♪
以上です、ありがとうございました！
コメント