CamaradeCamarade
2015/05/28

CSSのみでボタンを作る方法と簡単作成!ジェネレータまとめ

この記事は約2分で読めます。

CSSのみでボタンを作る方法と簡単作成!ジェネレータまとめ

ブログ初級カスタマイズ

CSSのみでボタンを作る方法についてご説明します。

CSSでボタンを作る基本的な方法

まずは以下のようなボタンの場合です。

こちらをクリック
htmlでは

<a class=”button” href=”#”>こちらをクリック</a>

と記述します。
CSSの記述は以下の通りです。

.button {
display: block;
width: 200px;
padding:15px 0;
text-align: center;
text-decoration: none;
border: 1px solid #4FA0E2;
background-color:#4FA0E2;
color: #fff;
}
.button:hover {
background-color:#0F5E9C;
color: #fff;
border: 1px solid #0F5E9C;
}
.button,
.button::before,
.button::after {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

:hover要素と、::before、::after要素を使用しています。
hover要素はマウスオーバーした時に変化を起こす要素です。
::beforeと::after要素を使用することで、マウスオーバーした前と後、それぞれにtransition(時間的変化)を起こせるので、
スムーズな変化になります。

以上がCSSでボタンを作る基本的な方法です。

CSSボタンを簡単に作ることができるジェネレータ

簡単にCSSボタンをつくることができるジェネレータもご紹介します。

サンプルでボタンの種類がいくつもあるので、これまで画像で作っていたようなボタンもすぐにCSSで実装することが可能です!

Buttons

_r1_c1

 

css gradient button

2

 

Best CSS Button Generator

3

 

 

CSS3 Button Generator

4

 

12 fancy buttons

6

以上ご参考にしてみて下さい。

一覧へ戻る

私たちについて

私たち『Camarade(カマラード)』はクリエイター目線で
総合的な情報を発信するWebメディアとして
PhotoShopやillustratorの活用方法や、WordPressなどのCMSの
カスタマイズ方法など幅広い情報をお届けしていきます。
同時にSOHOやフリーランスのパートナーを募集しております。