creatersnest115

こんなの作りたい!CSS3で実装するキレイなボタンチュートリアルまとめ


かっこいいボタン、きれいなボタン、カワイイボタン。
画像じゃないと作れないと思っていませんか?
そんなことはありません。

CSS3で十分いいボタンができますし、
アニメーションやエフェクトをつけることも可能です。
より軽いWebページ、かつボタンに動きを加えて
見た目もおしゃれなページを作りましょう。

目次

CSS3の勉強になるかも!?画像を使わないボタンの作成手順/webpark

CSS3の勉強になるかも!?画像を使わないボタンの作成手順/webpark
http://weboook.blog22.fc2.com/blog-entry-311.html

まずは画像を使わないボタンの作り方について解説しているサイトです。
CSS3を使って、どのように作られていくか理解しながら
読み進めることができます。

 

CSSのみで実装するボタンデザインやホバーエフェクト 20+α/NxWorld

CSSのみで実装するボタンデザインやホバーエフェクト 20+α

http://www.nxworld.net/tips/css-only-button-design-and-hover-effects.html

ボタンにマウスをのせたときのボタンデザインや、
その際のアクションの方法を、実際のDEMOを見ながら
解説しています。

 

簡単に実装できる、ボタン画像のマウスオーバーイベント 10+/NxWorld

簡単に実装できる、ボタン画像のマウスオーバーイベント 10+

http://www.nxworld.net/tips/button-mouseover-event.html

マウスオーバーでボタンを変化させるパターンを
数種類紹介しています。
その作り方にはいろいろあるのですが、実用的なものばかりで
参考になりますね。

 

CSSでクロスフェードする画像ボタン/rss

CSSでクロスフェードする画像ボタン

http://www.i-archi.jp/rss/?p=79

Web系の雑誌に掲載されていた画像ボタンです。
どのように作られているかも説明があるので、
理解がしやすく、どんな場面でも応用できますね。

 

【CSS】CSS3のみでクリック開閉メニューを作る/Lilting Channel

CSSでクロスフェードする画像ボタン

http://lilting.ch/2014/10/09/css-click-openclose-pulldown.html

オンマウスすると出てくるプルダウンメニューもいいですが、
クリックして開く、閉じるとしたほうがたしかに現実的な
印象です。

 

ワンポイントに使えるCSS3マウスオーバーアニメーション5種/WEB PIXEL

ワンポイントに使えるCSS3マウスオーバーアニメーション5種

http://www.webopixel.net/html-css/831.html

掲載されているデモページを見てみると、
変わった動きのマウスオーバーで変化するボタンがたくさんあります。
ボタンを目立たせたい方におすすめです。

 

CSS3アニメーションを使ったメニューやボタンのサンプル紹介【289種類+α】/CREATIVETIPS

CSS3アニメーションを使ったメニューやボタンのサンプル紹介【289種類+α】

http://11neko.com/menu-style-inspiration/

CSS3のアニメーション効果を使い、動きのあるメニューやボタンを
たくさん紹介しています。
きっと自分に必要なモノが見つかることうけあいです!

 

マウスオーバーでアンダーラインが伸びるボタン/NAKAZI LAB.

マウスオーバーでアンダーラインが伸びるボタン

http://nakazilab.com/mouse-over-extend-underline/

ちょっと変わっているアニメーションで、
オンマウスにするとアンダーラインがするするっと伸びていきます。
さりげないアクションがお好きな方にぴったりです。

 

5つの効果で作る、よく使うCSS3ボタンデザインサンプル集/TOUCH&SLIDE

5つの効果で作る、よく使うCSS3ボタンデザインサンプル集

http://touch-slide.jp/column/304/

ボタンの形状デザインをCSSで作ったサンプルが
もりだくさん!
円形ボタンだってCSSで作れちゃいます!

 

CSSボタンデザインが簡単にできるフリーサイト「CSS Button Builder」/CSS Button Builder

CSSボタンデザインが簡単にできるフリーサイト「CSS Button Builder」

http://kanadesign.com/css-button-builder-jp/

このサイトのStep1でボタンの形状を作り、
Step2でHTMLを、Step3でCSSをコピーするだけで
オリジナルのボタンが作成できる便利ツールです。

 

【CSS】CSSだけでフラットデザインのボタンを作る方法 /delaymania

【CSS】CSSだけでフラットデザインのボタンを作る方法

http://delaymania.com/201410/web/css-button-flat-design/

スマートフォンやタブレットなどのデバイス端末が増えている中、
実現したいのが「フラットなボタン」です。
細かく説明しているので、勉強したい方はぜひどうぞ。

 

画像を使わず、CSSだけでこだわりボタンを作る/adobe

画像を使わず、CSSだけでこだわりボタンを作る

http://www.adobe.com/jp/jos/pinchin/article/design-with-css/css-button.html

ボタンのあり方や、表現について詳しく解説しています。
ボタンは「押してもらう」ためのもので、どうすれば
押してもらえるようなデザインになるのかを考察しています。

 

cssでつくるボタンデザイン/25egg

cssでつくるボタンデザイン

http://25egg.com/sample/css3btn/

シンプルなボタンですが、段階を踏みながら解説しています。
基本的なボタンを、しっかり身につけることもデザインの一歩ですね。
見なくてもCSSが書けるよう、理解しておきましょう。

 

button要素のデザインを変更する方法(HTML、CSS)/monopocket.jp

button要素のデザインを変更する方法(HTML、CSS)

http://monopocket.jp/blog/css/1587/

スタンダードなボタンに、CSSでデザインを施したものを
ひとつずつ解説しています。
影の使い方や角丸の利用など、テクニックを磨くことができます。

 

[CSS]写真画像の背景やフラットなスタイルのWebデザインにぴったりなゴーストボタンの実装方法のまとめ/coliss

[CSS]写真画像の背景やフラットなスタイルのWebデザインにぴったりなゴーストボタンの実装方法のまとめ

http://coliss.com/articles/build-websites/operation/css/css-tutorials-ghost-buttons.html

ゴーストボタンをご存じですか?
それ自体はシンプルなボタンなのですが、
使いどころが難しく感じられるかもしれません。
そのメリットとデメリットについても、解説しています。

 

CSS3 Button Generator/CSS3 Button Generator

CSS3 Button Generator

http://css3button.net/

簡単にCSS3を使ったボタンを、指示通りに作成できる
ジェネレーターです。
便利に使って、オリジナルのボタンを作ってみるのもありですね。

 

Buttons/Buttons

Buttons

http://unicorn-ui.com/buttons/builder/

英語のサイトです。
さまざまなデザインのボタンをダウンロードできるサイトです。
一度中身をみながら研究して、新しいボタンを作っても
いいかもしれませんね。

 

CSSだけでここまでできる!キレイなボタンの作り方/style

CSSだけでここまでできる!キレイなボタンの作り方

http://www.hp-stylelink.com/news/2013/07/20130717.php

Web制作会社のサイトで、きれいな立体的ボタンの
作り方を解説しています。
影の使い方が秀逸です。

 

2.5dBUTTON/2.5dBUTTON

2.5dBUTTON

http://noht.co.jp/2_5dbutton

英語のサイトです。
画面下のほうにあるスライダーを使って、
希望するボタンを簡単に作れるジェネレーターです。

 

CSSでラジオボタンとチェックボックスにスタイルを当てる/Qiita

CSSでラジオボタンとチェックボックスにスタイルを当てる

http://qiita.com/ryo620/items/a7941774469a6229a64a

フォームに使うラジオボタンやチェックボックスのパーツを
フラットなボタン風にする解説をしています。
フォーム自体をきれいにデザインしたい方にもおすすめです。

 

(K)フラットなデザインのカチッと動く立体ボタンをCSSのみで作成してみる/CSS-TRICKS

(K)フラットなデザインのカチッと動く立体ボタンをCSSのみで作成してみる

http://webkcampus.com/201501/926/

英語のサイトです。
丸いボタンデザインを、CSSを使ってグラデーションや影を
駆使して立体のボタン風にしています。

 

CSS3アニメーションを使って魅せるボタンを実装しよう!!/株式会社エレメント

CSS3アニメーションを使って魅せるボタンを実装しよう!!

http://elmt.jp/web/2930/

CSS3を使って、さまざまなアニメーションボタンの作り方を
解説しています。
サンプルソースもあってコピーペーストしながら学びましょう。

 

アイコン型WebフォントをCSSでデザインしたボタン10個/Webpark

アイコン型WebフォントをCSSでデザインしたボタン10個

http://weboook.blog22.fc2.com/blog-entry-397.html

Webフォントを使った、アイコン型のボタンデザインを
解説しています。
FacebookやTwitterなど、おなじみのアイコンを画像なしで
作れます。

 

3ステップですぐ出来る! 簡単おしゃれなCSSボタンデザイン/STREAMER BLOG

3ステップですぐ出来る! 簡単おしゃれなCSSボタンデザイン

http://blog.3streamer.net/html5-css3/3step-css3design-fontawesome-765/

基本的なボタンのデザインから始まり、
グラデーションをつけたりアイコンをつけたり、
徐々にボタンらしい形になります。

 

cssだけでcheckboxやradioのデザインを変更/WEBdev

cssだけでcheckboxやradioのデザインを変更

http://webdev.jp.net/checkbox-radio-custom-css/

CSSを駆使したフォームのラジオボタンやチェックボックスの
デザインの仕方を解説しています。
グラデーションをつけたりアイコンをつけたり、デザインの奥深さには
いつもながらに感心します。

 

CSSで作るフラットデザインボタン/Puzzle

CSSで作るフラットデザインボタン

http://www.puzzle-web.jp/archive/220/

CSSで作られたおしゃれなフラットボタンのCSSソースを
コピー&ペーストして使うことができます。
大きさも大・中・小と揃っていて、お好みで使えます。

 

CSSで作られた、かわいいデザインのボタン 10種/9ineBB

CSSで作られた、かわいいデザインのボタン 10種

http://9-bb.com/css-button/

かわいらしいデザインのCSSボタンです。
ドット柄やチェックなどもあり、これが画像なしで作られているとは
思えないほどです。

 

紙のような、質感を出す 影を使った 浮き上がったり、めくれたりするのを表現したボタンのデザイン/9ineBB

紙のような、質感を出す 影を使った 浮き上がったり、めくれたりするのを表現したボタンのデザイン

http://9-bb.com/紙のような、質感を出す-影を使った-浮き上がった/

紙質っぽい影がおしゃれなボタンです。
めくれ感の上手な影の使い方が秀逸です。
使ってみたい!と思わせてくれるのが嬉しいですね。

 

CSSだけで作られたToggleボタン5つのデザイン 『Pure CSS toggle buttons』/9ineBB

CSSだけで作られたToggleボタン5つのデザイン 『Pure CSS toggle buttons』

http://9-bb.com/cssだけで作られたtoggleボタン5つのデザイン-『pure-css-toggle-buttons』/

デバイス端末のOSで見かけるトグルボタンです。
5種類のボタンは、スマートフォン向けのWebページに使えて
応用がききそうです。

 

【CSS】背景の色が少しズレた印刷チックなボタンのデザイン/9ineBB

【CSS】背景の色が少しズレた印刷チックなボタンのデザイン

http://9-bb.com/css-button-2/

背景のカラーが、枠とずれているデザイン要素の高いボタンです。
印刷でよくみかけるデザインですが、これも画像を使わず
CSSでできています。

 

まとめ

動きのあるボタンは、CSSを使えば簡単に作れますが、Webページ全体をみながら
違和感のないようなデザインにしましょう。

やたらと動きまくるボタンは、うるさく感じられるかもしれません。
ワンポイント的に扱うことで、
ユーザーはきっと「おっ!?」と感じてくれることでしょう。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Article実はけっこう便利なコピースタンプツールの使い方と使えるシチュエーション