【CSSのみ】クリックするとベコンっと凹む!JS一切不要の角丸ボタンを作ったよ! | Garney.Web

【CSSのみ】クリックするとベコンっと凹む!JS一切不要の角丸ボタンを作ったよ!

スポンサーリンク

角丸のボタンって結構使うんですよね。だから前のスライドメニューの様にCodePenにテンプレートを書いておくことにした。こんなやつね!↓↓

クリックしてもらうと解りますが、へこみます。こいつへこむぞ!。はい、へこましました。オールCSSです。今のCSSは便利ですね。
古いIEでは無理だけど、IE9位なら問題なく角丸になる。IE8だと全て四角形になる。後アニメーションもしない。
JSを書かなくてもへこませれるし、簡単に実装できるし便利!。

ちなみにボタンの中のテキストは1行限定。2行には対応していない。2行にするならCSS書き換えないとダメっすな。line-heightの当たりをいじってください。
それと、aにhref属性を抜いていますが、実際使う場合は

<a href="url">テキスト</a>

として使ってください。

角丸ボタンのHTMLの雛形について

</p>
<p>&lt;div class=&quot;btn-box&quot;&gt;</p>
<p>&lt;div class=&quot;btn circle small yellow&quot;&gt;&lt;a&gt;btn&lt;/a&gt;&lt;/div&gt;</p>
<p>&lt;/div&gt;</p>
<p>

これだけ。

CodePen上のソースではulとかliとか書いてあるけど、これはボタンを並べたいから書いただけで、実際使う時は上記のHTMLをコピーして使いたい所に貼り付ければ良い。

.btn-boxは.btn本体を包含している親要素であり、これが無くてもボタンとしては問題ないです。だけどボタンの中に別のボタンや、ボタンの外にテキストを入れたい場合に便利だと思う。だからいつも、btnには親要素としてdivを挿入している。

角丸ボタンのCSSについて

<br />
.btn-box .btn a{<br />
  display:block;<br />
  color:#FFF;<br />
  text-decoration:none;<br />
  text-align:center;<br />
  line-height:40px;<br />
  box-sizing:border-box;<br />
  position:relative;<br />
  top:0px;left:0px;<br />
  transition:all 0.2s cubic-bezier(.09,1.17,.51,.98);<br />
}</p>
<p>.btn-box .btn a:active{<br />
  top:4px;<br />
  line-height:35px;<br />
  box-shadow:0px 0px #000;<br />
}<br />

基本はこれ。.btnの子要素にはa限定として書いてあるので、a以外もあり得るのであれば、aにclass名などを付けて、そのクラスに対してCSSを適応させればいいかと思う。

またカラーとサイズ、ボタンの形状によってCSSを分けました。

<br />
.btn-box .btn.circle a{border-radius:50%;}</p>
<p>.btn-box .btn.circle.small a{<br />
  width:40px;height:40px;<br />
  line-height:40px;<br />
}</p>
<p>.btn-box .btn.yellow a{<br />
  background-color:#FFD464;<br />
  border:solid 1px #FFD464;<br />
  box-shadow:0px 4px #cfa003;<br />
}</p>
<p>.btn-box .btn.yellow a:active{<br />
  background-color:#fae49c;<br />
  border:solid 3px #cfa003;<br />
  box-shadow:0px 0px #cfa003;<br />
}<br />

これは、ボタンの形状が円形であり、サイズはsmall、色は黄色のスタイル。他にも形、サイズ、色は用意したけど、ちょっとやり過ぎたかな。書いていて思ったわ。細かく分けすぎた気もしないでもない。「細かいわボケェ!」な人は、.btn-box .btn aにスタイルを統合すれば良いと思う。

<br />
.btn-box .btn a{<br />
  display:block;<br />
  color:#FFF;<br />
  text-decoration:none;<br />
  text-align:center;<br />
  line-height:40px;<br />
  box-sizing:border-box;<br />
  position:relative;<br />
  top:0px;left:0px;<br />
  transition:all 0.2s cubic-bezier(.09,1.17,.51,.98);<br />
  border-radius:50%;<br />
  width:40px;height:40px;<br />
  background-color:#FFD464;<br />
  border:solid 1px #FFD464;<br />
  box-shadow:0px 4px #cfa003;<br />
}</p>
<p>.btn-box .btn a:active{<br />
  top:4px;<br />
  line-height:35px;<br />
  box-shadow:0px 0px #000;<br />
  background-color:#fae49c;<br />
  border:solid 3px #cfa003;<br />
  box-shadow:0px 0px #cfa003;<br />
}<br />

こんな感じで!。

へこむ部分のCSSについて

クリックしたらへこむ部分については、transitionプロパティで正常時のスタイルを指定しておき。:active擬似要素でクリックされた時のスタイルを別に書く。これでアニメーションする。

へこむ部分については、box-shadowプロパティでボタンに影を付ける。クリック後に影を0pxに変えて見えなくすると同時にtopプロパティの値で影が無くなった分だけボタンの位置を下げる。これでへこんだ様に見える。これだけです。

角丸ボタンのバリエーション

角丸のボタンのバリエーションは、

  • 円形・・・circle
  • 楕円・・・round-corner
  • 角丸・・・ellipse

の3種類を用意した。.btnクラスにこれら形状を指定してやると、その形でボタンが表示される。ちなみに角丸じゃないけど、rectangleを指定すると、長方形になります。

角丸ボタンの色のバリエーション

色は4色

  • 黄・・・yellow
  • 赤・・・red
  • 青・・・blue
  • 緑・・・green

CSSが読めるなら簡単に色のバリエーションも増え痩せるようにしてあります。コーダーでデザイン知識は皆無なので「カラーパターンおかしいやろ!」とか言われそうだが、知らん。その辺は知らんから知らん!。後調子にのってフラットカラーにした。

形状と同様に.btnクラスにこれら記入してください。

角丸ボタンのサイズについて

角丸ボタンのサイズは3種類

  • 小さい・・・small
  • 普通・・・middle
  • 大きい・・・large

例によって.btnクラスに付ける。

あとがき

どうかな。これは恐らく、コピペのみで使えるはずだ。自分もコピペ出来ないと困るのだ。そのためにCodePenにテンプレ置いたのだ。使いたい人はどうぞ。使ってください。後改造してもっと良い感じになったら教えて下さい。魔改造もOKです。

もっと自転車旅を知りたい人向け有料マガジンやってます。

もっと自転車旅を知りたい人向け!
有料マガジンやってます。

自転車世界一周マガジンについて詳しくはこちら

スポンサーリンク

フォローする

ツイッターやっています。


Profile

プロフィール

Profile びゃす

名前 びゃす
現在自転車で世界中旅しています。
スタートはアメリカ合衆国アラスカ州。
南米最南端を目指して毎日ひたすら前進中!。

自転車を漕ぎ、見た世界について感じたことをブログで発信しています。
詳しいProfileはこちら


Instagram
follow us in feedly
Followボタンからお気に入りブログを
登録する方法