サイト制作に!!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="http://original-game.com/css-button/">button</a>

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

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

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

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

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

<a class="btn" href="http://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.

スポンサードリンク

おすすめの記事♪

少し早いですが、夏をイメージした曲を作りました。

暑い夏は嫌いですが、寒い冬も嫌いです。春も鼻[email protected]_is_Rです。 そんなこんなで、少し早いですが、夏の一曲制作しました。 夏といえばやっぱり海! てなわけで、海をイメ

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

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

Homebrew

Homebrewを使いこなせ!Macへのインストールや使い方。

[email protected]_is_Rです。 やり直したところで同じ道を辿るのがオチですよ、全国の不幸な皆さん!! さて、おふざけはここまでにして、今回はHomebrewにつ

イラスト描いてみた。「向日葵と女子高生」

まだ本気出してないんじゃない。本気出したけど[email protected]_is_Rです。 努力すればいいってもんじゃないですね。生まれ持ったものがある。 関係ない話はいいとして、今回も前回に引き

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

[email protected]_is_Rです。 今回は JavaScript について、初心者の人にも分かりやすく、丁寧に解説していきます。 JavaScript と EcmaSc

ゲーム開発で使用する人魚のイラスト描きました。

制作中の人魚のゲームは、Unityを使ったAndroid専用[email protected]_is_Rです。 そんな訳で、いまUnityの使い方を覚えているのですが、まだまだ時間がかかりそう。

ピクチャ・イン・ピクチャ

ピクチャ・イン・ピクチャが絵の練習に超便利でヤバスな件について。

ピクチャ・イン・ピクチャでイラストの練習して[email protected]_is_Rです。 macOS Sierra のピクチャ・イン・ピクチャが、イラストの練習に超便利でヤバスなので、紹介させていただこうと思

Ameba customize

アメーバのOwndで、無料で超簡単にホームページ作ってやろうぜ!!

[email protected]_is_Rです。 ホームページを作成するには、まずHTMLを使う能力、若しくはソフトが必要になります。 さらにサーバーを借りなくてはなりません。するとお金がかかったりします。 では

あなたの前世は猫でしょう!

LINEスタンプを販売しよう。販売の手順や方法。

前は、猫より犬派だったけど、猫を飼いはじめて[email protected]_is_Rです。 今回は、LINEスタンプの販売方法について、記事を書いてみたいと思います。 LINEスタンプは、誰

SCSS vs SASS どっちが便利か違いを比較。おまいら SASS 使えよ!

CSS を書くときに、 Sass はもう手放せません。 @It_is_R です。 さて、今回のテーマとなる Sass の表記には、2種類ありますよね。 SCSS と、 SASS です。


コメントを残す

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


Category

Games