【CSS3】マーブルチョコの様なボタンを作ってみよう!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

こんにちは。
シーサイドレーベルweb担当の飯野です。

今回は、CSS3を使って、
マーブルチョコの様なボタンを
作ってみようと思います。

円形を作って、グラデーションで
ツヤがあるように表現しています。

marble

まずはhtmlタグはこの様に設定してあります。

そして、CSSの設定はこちらです。
一番左の赤いボタンのCSSだけ貼りますね。

「border-radius」で角丸を指定しています。
円の大きさを縦横100pxに対して
角丸を50pxにすると、ちょうど円形になります。

そして、box-shadowで
ボタンに影を付けています。

backgroundでグラデーションの背景色や、
開始位置、終了位置を指定しています。

ボックスの左上から30px右下の位置をグラデーションの
中心として、半径80pxで赤い色を入れている形になります。

薄い赤色を「#fec0b9」
濃い赤色を「#cd0000」
で設定しました。

テキストの文字にも
text-shadowで若干影が入っています。

色合いや影の付け方などで、
ボタンのツヤ加減なども変わってきたり
質感も違く見えたりすると思いますので、
数値などいじってみて変化を試してみて下さいね。

こちらにデモページを設定しましたので
良かったらご確認下さい。

デモページ

では、また来週お会いしましょう。

●3年ぶりに帰ってきた「藤田哲也の個別コンサルティング」

 ⇒ http://www.japan-forum.jp/sp/kojin.htm

mt

起業初年度1000万円、その後ゆるやかに年商3000万円までを目標に起業に向けて一歩を踏み出したい方向けの起業専門メルマガです。最新のノウハウを始め、セミナーや限定サービスのご案内をご希望の方は今すぐ下記フォームより、メインで使っているメールアドレスをご登録下さい。家族との時間を大切にしながら自由自在に収入を増やせる起業家になる方法を余すことなくお伝えいたします。

メールアドレス(必須)

コミュニティ