★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

「 ボタン 」一覧

クリック時にガタガタ揺れるボタンの作り方【jQuery+CSS】

クリック時にガタガタ揺れるボタンの作り方【jQuery+CSS】

インタラクティブなWebサービスだとユーザーの入力内容や操作が間違っていた場合、ボタンを押すとガタガタ震えるような演出をしているところがあります。あのような演出はCSS3のアニメーションプロパティとjQueryなどのスクリプトを組み合わせると実現できます。ここではクリック時にボタンがガタガタ震えるアニメーション効果をつける方法について解説します。

画面をスクロールすると追従してくるボタンをCSSだけで作る方法

画面をスクロールすると追従してくるボタンをCSSだけで作る方法

画面をスクロールするとそれに追従するようなボタンはCSSだけで作ることが可能です。作り方はとても簡単でPCやスマホの表示領域(viewport)に対して位置を固定するようにpositionプロパティと位置を調整するだけです。ここではその作り方とスクリプトと組み合わせて記事トップに戻るボタンを作る方法などを解説します。

CSSでグラデーション有りの立体的なボタンを作る方法

CSSでグラデーション有りの立体的なボタンを作る方法

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

クリック・ホバーで縮小拡大するリンクボタンをCSSだけで作る方法

クリック・ホバーで縮小拡大するリンクボタンをCSSだけで作る方法

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