1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. CSS
  6. »
  7. サイト制作に!!CSSでマウスオーバーボタンの作り方。

サイト制作に!!CSSでマウスオーバーボタンの作り方。

新年初の記事です。とりあえず、あけましておめでとうございます。@It_is_Rです。
お正月……おそーがつ……おそまつ……おそ松さん。新年早々くだらないこと言ってないで早く記事を書けって話ですね。

WEBサイトを作る時、必要不可欠なのがボタンです。
ボタンはできる限りカッコよく作りたいのですが、わざわざ画像にする程でもない。そんな厄介なやつがボタンです。
そこで、CSSを使ってボタンを作ると、簡単にカッコいいボタンを作ることができます。

今回はそんなCSSを使ったボタンの作り方の基本を紹介しようと思います。

CSSの基礎知識。

woman
まずはCSSの基礎知識から学んでいきましょう。

CSSはHTMLと組み合わせて使うことができます。
CSSファイルを新たに作成して、外部ファイルとして読み込むことも可能ですが、今回は手軽にHTMLファイルに直接記述する方法で作っていきたいと思います。

記述する場所は、headタグの中にstyleというタグを作り、その中に書いていきます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>CSS sample</title>
    <style>
      〜ここにCSSを書く〜
    </style>
  </head>
  <body>
    〜ここにWEBページの内容を書く〜
  </body>
</html>

ボタンを作る。

それでは実際にボタンを作ってみたいと思います。

リンクを作る。

ボタンといえば、どこかのページにリンクされているのが普通です。
なので、まずはリンクを作ってみましょう。

このサイトのこのページにリンクする場合はこのようになります。

<a href="https://original-game.com/css-button/">button</a>

こうすれば、テキストのリンクを貼ることができます。

マウスを乗せた時に背景の色を変える。

このテキストにCSSで装飾し、ボタンらしくしていきましょう。

やりたいことは、テキストを四角で囲み背景の色を黒くすること、マウスを乗せたときにその背景の色を赤に変えることです。
これをaタグに対して装飾したいのですが、このままaタグに装飾すると、すべてのaタグがボタンになってしまいます。

そこで、aタグにクラスを加える方法で作っていきたいと思います。

<a class="btn" href="https://original-game.com/css-button/">button</a>

これに対して、CSSで装飾していきます。
visitedはリンク先が既に訪問したサイトである場合に適用されます。
また、hoverはマウスが上に乗った場合に適用されます。
activeは、マウスが押されたときです。

backgroundで背景色を変更し、colorでテキストの色、paddingを入れることで、テキストの周りに空間を作ります。
text-decorationをnoneにすれば、リンクの文字に表示される下線を消すことができます。
font-sizeでテキストのサイズを変更できます。

.btn,
.btn:hover,
.btn:visited,
.btn:active {
  font-size: 24px;
  color: #fff;
  text-decoration: none;
  background-color: #999;
  padding: 10px;
}

.btn:visited {
  background-color: #aaa;
}

.btn:hover {
  background-color: #f88;
}

.btn:active {
  background-color: #f22;
}

See the Pen button by R (@It_is_R) on CodePen.

スポンサードリンク

関連コンテンツ

オススメ記事

【Android Studio】じゃんけんゲームの作り方(アプリ開発の基本)

限りなくじゃんけんが弱い@It_is_Rです。 Androidアプリ開発、11回目となりました。 そろそろ何かアプリを作ってみたいですよね。基本は大事ですが、一番つまらないですね。 そこ

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

【Gitの使い方 – その5】リモートリポジトリ(GitHub)へPushしてみよう!

現在、新曲熱意制作中の@It_is_Rです。 さて、Gitの使い方5回目の今回は、GitHubのリモートリポジトリを作成し、そこにローカルリポジトリをPushする方法を紹介します。 [se

bootstrap3

Bootstrap3でサイト制作するための、準備と初期設定。

ゲーム制作は順調にすすんでいます。このまま順調にいけば、今月か来月までには完成できそうです。@It_is_Rです。 さて、今回はBootstrap3によるサイト制作の入門講座です。 このBoo

キャラを決まった間隔ずつ動かすよ!

小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす!

小学生からのプログラミング入門講座(にゅうもんこうざ)、第11弾です。 前回は、キャラクターの画像(がぞう)をスムーズに動かす方法でしたが、スピードが速すぎたので、画像の移動間隔(かんかく)を短

.zshrc で zsh をカスタマイズしてみよう。(プラグイン無し)

昔、車に幽霊が乗っていたので、じっと目を凝らして見ていたら、ただの人だったことがあります。@It_is_Rです。 あの時は気まずかった。。。女性の方でした。 さて、今回はターミナルをかっこよく

Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

今回は Bootstrap 4 の使い方です。It_is_Rです。 では詳しくみていきましょう。 Bootstrap とは Bootstrap は Webサイトを制作するときに使う、

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

キーボードで画像を動かすよ!

小学生からのJavaScript入門。キー入力でキャラを動かしてみよう!

小学生からのプログラミング入門講座(にゅうもんこうざ)、第7弾です。 前回はHTMLでりこちゃんの画像を表示し、クリックすると前に一歩動くというのをJavaScriptで作りました。 Java

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこともありました。@It_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php

コメントをどうぞ!

メールアドレスが公開されることはありません。




オリジナルゲーム.com