[CSS絢爛記]”記事一覧へ”ボタンをCSSで豪華にしてみた

公開：2019.09.19 更新：2020.06.16

こんにちは、らいどらです。

先日サイトを回覧していたところ、ものすごいボタンを見つけちゃいました……..

何だこのボタン！？雑にも程があるだろ！

まったくこんなボタン誰が作ったんだよ……..（我

と、どのサイトにも不可欠な内部リンクボタンですが、クリックさせるためには相応の装飾が必要です。

という訳で今回はボタンのCSS開発をしていこうと思います。

立体的＋hoverいろいろ

直接、先ほどのページでやってもいいのですが、トラフィックに影響が出そうなので試験ページでやります。

HTMLは単純にボタンだけ。

<button id="kijishe"><a>記事一覧へ</a></button>

ここに大量のCSSを突っ込みます。

#kijishe {
  font-size: 20px;
  border: none;
  background-color: mediumseagreen;
  padding: 15px 30px;
  border-radius: 10px;
  display: block;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 6px 0 seagreen, 0 12px 0 rgba(0,0,0,.2);
  box-sizing: border-box;
}

#kijishe a {
  text-decoration: none;
  color: #fff;
  transition: color .3s,background .3s,box-shadow .3s,transform .3s;
}

はい。これでデフォルトの形は完成です。

コツとしては、影を垂直方向にしか伸ばさないことですね。こうすると、よりボタンに見えやすくなります。後は影の色を本体より暗くすることとか（さっき覚えたとは言えない人。）

記事一覧へ

いやはや、これでも前よりはかなり良くなった…..。

ですが、こんなので満足してはいられません。マウスオーバーで影が小さくなってボタンが下に沈むような効果を追加します。

CSS

#kijishe:hover {
  box-shadow: 0 3px 0 palegreen, 0 6px 0 rgba(0,0,0,.2);
  transform: translateY(3px);
  animation: flash 1s both;
}

記事一覧へ

良い感じに沈んでますね。この場合は影の量を通常時の半分にしてます。

後は:activeですね。さらに沈み込むのに加えて、ちょっとアニメーションさせて光らせようと思います。

CSS

#kijishe:active {
  color: #ddd;
  background: seagreen;
  box-shadow: 0 0 0 palegreen, 0 0 0 rgba(0,0,0,.2);
  transform: translateY(6px);
  transition-duration: .1s;
  border: 0px;
}

@keyframes flash {
	0% { background: mediumseagreen; }
	10% { background: palegreen; }
	100% { background: mediumseagreen; }
}

うおおお～ボタンだああ～。待ち焦がれていたボタンです……。嬉しい…..。

おまけ

さて、実装できそうなボタンは出来ましたが、予備知識でオリジナルのボタンが作りたくなったので、ちょっと実験していこうと思います。

いろんなCSSの知識はこちら( https://lopan.jp/css-animation-hover/ )のサイト様が参考になりました！すごく面白いので良ければ見てみてください！

そして私はというと、マウスオーバーで回転して、押すと飛んでいくやつを作ろうと思います。

<ul class="csblocklist">
　　<li class="slashli">
   　　<button class="slashe"><a>記事一覧へ</a></button>
        <dl>
　　　　　　<dt></dt>
          　<dd>Noteへ →</dd>
　　　　</dl>
   </li>
</ul>

長いCSS

.csblocklist {
  display: flex;
  justify-content: space-around;
  width: 640px;
  margin: 1em auto;
  padding: 0;
  text-align: center;
}

.slashli {
  position: relative;
  list-style: none;
  perspective: 3000px;
  width: 200%;
  height: 200%;
}

.slashli dl {
  position: absolute;
  top: 0;
  margin: 10px 0;
  width: 170px;
  height: 70px;
  font-size: 21px;
  padding: 15px 30px;
  border-radius: 10px;
  box-sizing: border-box;
  box-shadow: 0 6px 0 rgb(50,202,50), 0 12px 0 rgba(0,0,0,.2);
  color: royalblue;
  display: block;
  cursor: pointer;
  background: rgba(100,252,50,.8);
  backface-visibility: hidden;
  transition: opacity .6s, transform .8s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.slashe {
  position: absolute;
  font-size: 20px;
  border: none;
  width: 170px;
  height: 90px;
  background-color: mediumseagreen;
  padding: 15px 30px;
  border-radius: 10px;
  display: block;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 6px 0 seagreen, 0 12px 0 rgba(0,0,0,.2);
  box-sizing: border-box;
  backface-visibility: hidden;
  transition: opacity .6s, transform .8s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.slashe a {
  text-decoration: none;
  color: #fff;
}

.csblocklist .slashli:not(:hover) dl {
  transform: rotateX(-540deg);
  transition-delay: 0.05s;
}

.csblocklist .slashli:hover .slashe {
  transform: rotateX(540deg);
  transition-delay: 0.05s;
  opacity: 0.5;
}

.csblocklist .slashli dd {
  width: 100px;
  margin: 0;
  padding-top: 9px;
}

.csblocklist .slashli:hover dl {
  transform: translateX(20px);
  transform: translateY(10px);
}

.csblocklist .slashli:active dl {
  box-shadow: 0 3px 0 rgb(50,202,50), 0 6px 0 rgba(0,0,0,.2);
  animation: noteride 1s both;
}

@keyframes noteride {
	0% { background: rgba(100,252,50,.8); }
	10% { background: rgba(100,252,20,.5); }
	100% { background: rgba(100,252,50,.8); }
}

こんなです！試行錯誤に結構時間かかりました……。二時間ぐらい？

ちょっとこのページに載せる技術は持ち合わせていないので、トップページを見てみてください！そこそこやれてます。

まとめ

今回はボタン改造をしてみました。どうだったでしょうか。私としては、:not:hoverだとか、hoverのトリガー位置と実際に回転する要素位置の差などが一番難しかったです。

かなり掛かりましたが、やはり出来てみれば楽しいものですね！

それでは皆さんも素晴らしいCSSをお創りになさるよう…….。