Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/cwor/www/corporate/managesite/soho_wp/wp-content/plugins/social-networks-auto-poster-facebook-twitter-g/inc/nxs_functions_engine.php on line 168

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/cwor/www/corporate/managesite/soho_wp/wp-content/plugins/social-networks-auto-poster-facebook-twitter-g/inc/nxs_functions_engine.php on line 175

Warning: Cannot modify header information - headers already sent by (output started at /home/cwor/www/corporate/managesite/soho_wp/wp-content/plugins/social-networks-auto-poster-facebook-twitter-g/inc/nxs_functions_engine.php:168) in /home/cwor/www/corporate/managesite/soho_wp/wp-content/plugins/stripe/includes/core/libraries/wp-session/class-wp-session.php on line 146
CSSのみでボタンを作る方法と簡単作成!ジェネレータまとめ | 私たちCamarade(カマラード)はクリエイター目線で総合的な情報を発信するWebメディアとして情報をお届けしております。
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やフリーランスのパートナーを募集しております。