CSS3でマウスオーバーで押した風なボタンを作る方法
少しでも表示速度を速くすることを念頭においていることで、ほとんど?のボタンなどのパーツはできるだけ画像を使わないデザインになっているので、今回はCSS3で簡単にマウスオーバーで押した風なボタンを作る方法を紹介。
この記事はこのような仕事をしている人向けに書いています
- Webディレクター
- Webデザイナー
- コーダー、マークアップエンジニア
サンプルボタン
[HTML]
<p class="button"> <a href="#">Button</a> </p>
[CSS]
.button { width : 350px; text-align: center; } .button a{ text-decoration : none; display : block; color : #fff; border-radius: 4px; background-color: #ff6000; box-shadow: 0px 4px 0 rgba(0, 0, 0, .7); padding : 8px; transition: 0.2s all ease 0s; } .button a:hover{ background-color: #ffb589; box-shadow: none; transform: translate3d(0, 3px, 0); color: #2d2d2d; }
実装するのは結構簡単なので、用途に応じてカスタマイズしてもらえればと思います。
関連記事
-
-
【.htaccess】wwwあり統一、index.htmlなし、httpからhttpsへリダイレクト
htaccess設定の覚書 ・wwwありで統一 ・index.htmlなし ・httpからhttps
-
-
これはチャンス!KDDIからiPhone5の下取り価格の見直しが行われた!
先日、iPhone6とiPhone6plusが発表されたけど、KDDIから機種変更ユーザーを対象とし
-
-
Microsoft Edgeブラウザで電話番号、FAX番号がリンクされてしまう解決法
電話番号やFAX番号がリンクされるのはスマートフォンのみだと思っていたら、なんと「Edg
-
-
覚えたらブラウジングが別格に早くなるChromeブラウザのショートカットのまとめ
以前にもChromeのショートカットについて記事を更新したけど、今回はもっと多くのショートカットを使
-
-
【秘伝】写真を粗くしない状態でPDFファイルは劇的に軽量化することができる方法
どうも、MURAKAWAです。 どのビジネスでもPDFファイルを扱うことはあるかと思い
-
-
Youtubeの埋め込み動画を自動再生に設定する方法
動画の埋め込みコードのアドレスの最後に「?autoplay=1」を追加する src="//ww
-
-
決定回避の法則 | Web Marketing用語
人は、選択肢が増えるとその中から選択・決定することが困難になります。これを「決定回避の法則」
-
-
PNGファイルをかなり軽量化してくれるTinyPNGを使うべし!!
今までずーっと「PNGGauntlet」を使っていたんだけど、思ったよりあまり軽くならず。。 やは
-
-
保有効果 | Web Marketing用語
人は手に入れたモノに対し、入手する前よりも価値を感じる傾向にあります。これを「保有効果」とい
-
-
超簡単!Instagramの写真をRSSでWebサイトやブログに埋め込んで自動更新する方法
Instagramの投稿写真を自分のWebサイトやブログで掲載する方法があります。 一