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.

スポンサードリンク

関連コンテンツ

オススメ記事

Android アプリ開発入門! Android Studio のインストール手順。

人の笑顔が大嫌い。 @It_is_R です。 Android アプリ開発では、 Eclipse や Android Studio を使ってアプリを開発するのが一般的です。 一般的に言語は Ja

【Gitの使い方 – その2】GitをMacにインストールする方法!

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 Gitの使い方、第2回目の今回はGitをMacにインストールする方法を紹介します。

HTML5とCanvasを使うべ!

小学生からのJavaScript。HTML5とCanvasを使ってみよう!

小学生からのプログラミング講座(こうざ)、第9弾です。 これまでの講座(こうざ)では、JavScriptの基本(きほん)について学び、キャラクターの操作(そうさ)ができるようになりました。 こ

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

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

wordpress

【WordPress】パンくずリストをプラグイン無しで自作する方法

※追記(2018/2/12) もっと高機能になるように、改良修正しました。 人生で3回ほど死にそうになったことがある@It_is_Rです。 WordPressのパンくずリストを作

これまでのプログラム全体をクラスを使って作るべ!

小学生からのJavaScript。プログラム全体をクラスを使って作ってみよう!

小学生からのプログラミング講座(こうざ)、第13弾です。 前回はプログラミングにおける、クラスの使い方を学びました。しかし、まだクラスをどうやって使えばいいのか、ピンときていないかも

Swift

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

犬も歩けば棒にあたる。だからRは歩かない。@It_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

webpackの設定ファイル「webpack.config.js」の使い方を覚えよう

webpack.config.jsはwebpackを使う上での設定ファイルです。 今回は、webpack.config.jsの使い方を紹介します。 webpack.config.jsとは

zsh

zsh のインストール方法と、うまく起動しない時の対処法。

かっこいいものが大好きな@It_is_Rです。 そこで今回は、ターミナルをかっこよくする為の方法を、何回かの記事に分けて書いてみたいと思います。 今回、第一回目は zsh ( Z Shell

コメントをどうぞ!

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