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

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

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

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

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

目次
  1. CSSの基礎知識。
  2. ボタンを作る。

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.

スポンサードリンク

関連コンテンツ

オススメ記事

WordPressのテーマを自作してみよう。テーマ開発の方法を徹底解説!

WordPressテーマの自作方法を紹介していきます。 今回はテーマ作成における知識や、ツール、ファイル構成、実際の作り方などを書いていきます。 WordPressのテーマを自作する上

【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法

前にBootStrap4の記事を書いていましたが、日にちが空いてしまいましたね。@It_is_Rです。 前回は全体的な機能とアラートの使い方を紹介しました。 今回はバッジの使い方を紹介していき

ファイルを分けるべよ!

小学生からのJavaScript入門。ファイルを分けて管理してみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第5弾です。 前回はりこちゃんを方向キーで操作(そうさ)することができるようになりました。 しかしプログラムを作ってくと、コンピュ

enchant.jsのロード画面を、好きな画像に変更する方法。

今日は爆睡していました。@It_is_Rです。 enchant.jsのロード画面はカッコわるいなとずっと思っていました。「あ、これenchant.jsで作ったんだな」って思われてしまうじゃないで

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

完璧を求めすぎて、平均以下な@It_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

Dockerでよく使うコマンドとオプション、その使い方を徹底解説!

人生に意味は求めない。それよりもDockerのコマンドの意味を理解する方が重要です。@It_is_Rです。 Dockerにはたくさんのコマンドがありますが、まずはよく使うコマンドを覚えていきまし

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

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

Bootstrap 4によるボタンの作り方。色やサイズなどの指定方法!

Bootstrap4の使い方、第5回目となりました。 Bootstrapの機能のひとつとして、クラスを組み合わせて指定するだけで、色々なボタンが作れます。 今回はBootstrap4を使ったボ

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

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

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

【enchant.js入門】ガンシューティングゲームの作り方を完全解説!

enchant.jsを使ってガンシューティングゲームの開発を行なっていきます。 enchant.jsはゲームを作るのに特化したJavaScriptフレームワークです。 これを使うことで、Jav

コメントをどうぞ!

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