「 CSS 」一覧

リンクのクリック率やコンバージョン率を高めるのに効果的なのがリンクをボタンにすることです。ただリンクを設置するより目立つボタン形式にしてホバーやクリックすると動きがあるようなボタンを作ると読者に興味を持ってもらいやすくなります。そこでここでは思わずクリックしたくなるようなリンクボタンデザインをいくつか紹介します。コピペして好きなように使ってください。

オシャレなサイトだと画像内にテキストが表示されていたり、画像中にフォームが埋め込まれていたりします。このように画像内や中央に要素を埋め込むデザインは"CSSだけ"で実現できるので、具体例や応用例を交えてそのようなデザインを作る方法を解説します。

ただリンクなどを設置するよりも形状を立体的なボタンにすると読者の目を引くのでクリック率や成約率が上がることがあります。そのようなボタンをCSSで作るには要素にbox-shadowプロパティを指定すれば作成できます。それだけでもフラットな立体ボタンが作れますが、ここではさらにリアリティのあるグラデーションのかかった立体的なボタンを作る方法を解説します。

従来までは要素をアニメーションするにはjQueryなどを使う必要がありましたが、CSS3ではアニメーションプロパティが対kされたのでCSSのみで動きのあるボタンを作ることができます。ここではマウスがホバーしたり、クリックしたときにボタンの大きさが変わるボタンを作る方法を解説します。