ボタンデザイン「すべて見る」とページジャンプの2種

 
 
ジャンプはこっちのデザインでどうだろう
CSSボタンデザイン120個以上!どこよりも詳しく作り方を解説!
このページの情報で解決しなかったら検索してみましょう CSSで作れるボタンについて120個以上サンプルを作成してみました。 どこよりも詳しく、どこよりもサンプル多く解説しています。(おそらく..) どれもHTMLとCSSで実現できるものであり、PC向けボタンはすべてホバーアクション付きです。 また、CSSボタンデザインの作り方はもちろん、Webでボタンを作る際の重要なポイントについても解説しています。 おもしろいボタンから実用的なボタンなどもあります。 各コードはコピペしてご自由に使っていただいて構いません。 その前に、なぜCSSでボタンを作るのか?について少しだけ考えたいと思います。 簡単に言ってしまえば、 軽い!拡張性がある!解像度の心配がない!簡単! と言った理由ではないでしょうか? 画像でボタンを作ることも多いと思いますが、「画像じゃないほうがいいなあ」と思うことも多いと思います。 もちろん、デザイナーから上がってきたデザインデータからボタンを切り取って、HTMLに設置して、CSSでホバーはopacity:0.8、とかやれば簡単ではありますが、デザインツールの進化やレスポンシブの一般化に伴い、そういったイケてなくて古臭いやり方はあまり望ましくないです。 特にWebの場合、テストの繰り返しが必要ですが、画像でボタンを作るとなるとテスト用にいくつもの画像を作らなくてはいけません。色やテキストを変えるとなると画像すべてを修正する必要があります。しかし、CSSボタンであればそういった面倒な手間はかかりません。 CSSボタンを作る前に、HTMLとCSSの基本について軽くおさらいをしたいと思います。 まずは以下、ベースとなるCSSを書いてください。 /*まずはお決まりのボックスサイズ算出をborer-boxに */ *, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; } html { -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 62.5%;/*rem算出をしやすくするために*/ } .btn, a.btn, button.btn { font-size: 1.6rem; font-weight: 700; line-height: 1.5; position: relative; display: inline-block; padding: 1rem 4rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 0.3s; transition: all 0.3s; text-align: center; vertical-align: middle; text-decoration: none; letter-spacing: 0.1em; color: #212529; border-radius: 0.5rem; } すべてのボタンデザインに共通しているわけではありません。 不必要なものは消してください。 また、aタグかbuttonタグかなど、使うHTMLタグによってCSSを調節する必要があります。もし崩れたといった場合は、HTMLタグに当たっているCSSを確認するようにしてください。 box-sizingはborder-boxが一般化しているので書いています。 本ページで紹介するCSSボタンはフォントサイズを基準とする em、rem基準 で作っています。 pxを使っていると各サイズ固定になるため、pxで指定している箇所をすべて変更する必要がありますが、em、remを使っているとそのような心配がありません。 もちろん、デザインや制作物によってはpxベースで作ったほうがいい場合もあるので、あくまで制作物に合わせるようにしてください。 汎用的に使えるように書かれているので、少しコードが冗長になったり、セレクタが多かったりしますが、そのあたりは使用の際にまとめてください。 ボタンを作る上で欠かせないのがアイコンとフォントです。アイコンについては画像で作る場合であれば、そのまま画像に含めれば良いですが、CSSで作る場合は別で用意する必要があります。 簡単に使えるものとしては、 Font Awesome ...
 


©2023 Yatoro Electronics Co.,Ltd.