サイト制作に!!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.

スポンサードリンク

おすすめの記事♪

java

Javaのクラスとメソッドの違いとは?ゲーム風に解説。

この頃小説を読んでいなく、何か読みたいなと思[email protected]_is_Rです。 Javaを勉強し始めたばかりの人は、何やら難しい単語に混乱する人も多いでしょう。その中で、クラスとメソッドって一体何が

【アンデッド】新曲、ボカロラップ公開しました。

私はIt is R! ラップ書いたのであーる! おやつはカール! YO! @It_is_Rです。 しばらくブログの更新ができませんでしたが、ようやく更新することができました。 やっと曲作りが

KSSでスタイルガイドを作る方法。インストールと使い方。

そのうちWordPressのテーマを作る方法の解説とかし[email protected]_is_Rです。 いま準備中ですので、もうちょっとお待ちくださいねー。 そして今回ですが、KSSを使ったスタイ

blender

Blenderで3D美少女キャラの作り方。その8(後ろ髪を描く)

モンスターボールって下ネタですか?@It_is_Rです。 はい、いきなり不愉快な思いさせてすいませんでした。 今回はBlenderで作る3D美少女キャラの、第8回目です。 前回は空いた空

Homebrew

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

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

bootstrap3

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

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

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

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

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

Medibang Paint

MediBang Paint Proの使い方。4コマ漫画を描く8つの手順。

[email protected]_is_Rです。 さて、最近は本当にMediBang Paint Proが流行っているから凄いなと思っています。 そこで、今回はMediBang

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

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

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

「ラッパーの女の子」描いてみた。

日本語ラップがダサいと言われる世の中ですが、[email protected]_is_Rです。 久しぶりにイラストを描きましたので、アップします。 世の中の綺麗事へ。


コメントをどうぞ!

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




Category

Games