[CSS絢爛記]”記事一覧へ”ボタンをCSSで豪華にしてみた 公開：2019.09.19 更新：2019.09.20
こんにちは、木彫り猫です。
先日サイトを回覧していたところ、ものすごいボタンを見つけちゃいました……..
何だこのボタン！？雑にも程があるだろ！
まったくこんなボタン誰が作ったんだよ……..（我
と、どのサイトにも不可欠な内部リンクボタンですが、クリックさせるためには相応の装飾が必要です。
という訳で今回はボタンの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をお創りになさるよう…….。
