クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

CSS

CSS ボタンの基本装飾

投稿日:2017年11月24日 更新日:

最近は他の方が公開されているボタンのCSSやCSSフレームワークで用意されているボタンがありますので楽ですよね。
ただ、仕事で制作するサイトはデザイナーさんはサイト専用のボタンをデザインされる事が多いかと思います。
それらのボタンを短時間で作るためにボタン制作の基本的なCSSは知っておいたほうが良いですね。

今回は一番単純なボタンの装飾を4つご紹介します。
ボタンの装飾をあまりされたことがない人は参考にしてもらえると嬉しいです。
サンプルも作りました。

  1. ノーマルボタン
  2. 角丸ボタン
  3. 長丸ボタン
  4. 影付きボタン

ボタンの基本装飾HTML

今回はaタグをボタンのように装飾してみようと思います。
buttonタグはFormの時にしか出番が無いかもしれませんね。

ボタンの基本装飾CSS

1. ノーマルボタン

aタグは「inline」なので横幅や高さの指定ができません。
2行目のように「inline-block」にしておくのが基本になります。
上記で通常の四角いボタンはできあがりです。

2. 角丸ボタン

ボタンの角を丸くしたい場合は以下のCSSを追加します。

角丸にしたい場合は、3行目の「border-radius」に角丸具合を設定します。
ボタンのサイズに合わせて値を調整してください。

3. 長丸ボタン

四角ではなく長い丸ボタンにしたい場合は以下のようにします。

角丸ボタンとほぼ一緒です。
「border-radius」の値を大きくすると長丸ボタンになります。
簡単ですね!

影付きボタン

最後に影付きボタンです。

「box-shadow」という属性を使います。
設定する値は影をつける場所、サイズ、色などを設定できます。

サンプルを作成しています。
サンプルを参考にデザインされたボタンに近付けていくと楽ですね。

-CSS

執筆者:

関連記事

CSS ブロック要素(div)の内側に枠線を引く(box-sizing)

きっちりとブロック要素の幅を指定していたのに、枠線を引いたとたんレイアウトが崩れることがあります。 レイアウト崩れが起こる原因 これは、枠線はブロック要素の外側に引かれるためです。 例えば、横幅「10 …

CSS テキストボックスのフォーカス時の青枠を無効にする

もしかするとChromeだけかもしれませんが、テキストボックスや画像にフォーカスされた時に青い枠が出てしまいます。 ↓こんなのです。 違和感がありますので、解除する方法を調べました。 CSSの設定のみ …

CSS 正規表現でクラスを複数指定する

CSSで作成するクラスはなるべく少ない方が良いですよね。 でも実際は仕方なく同じようなクラスを作らざるを得ない状況もあります。 その同じようなクラスにも1つずつ同じ属性を設定していくなんて事も多々あり …

CSS 画像の上に文字を重ねて表示させる(サンプル付き)

今回は画像の上に文字やタイトルを重ねて表示してみましょう! 少しオシャレで良い感じですよね。   こんな仕組みのものを作ります 画像をきっちりと囲む領域を作り「position:relati …

CSS テキストエリアのサイズ変更機能を無効にするには?サンプル付き

たいていのブラウザで、テキストエリアのサイズはユーザーが自由に変更できるようになっています。 ユーザーにとっては便利な機能ですが、テキストエリアのサイズを自由に変更されすぎるとレイアウトが崩れる原因に …


comment

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