CSSで作るリンクのスタイルの備忘録です。リンクのボタンはwebサイトを制作するときに必ずと言っていいほど使用しますから、使い回し出来るように記録に残しておこうと思います。
ベーシックなボタン
ベーシックな形のボタンです。派手なアニメーションはなくありきたりですが、そのため悪目立ちしないので凡庸性があります。
幅を変えたいのであればwidthを高さを変える場合はline-heightを変更してください。
See the Pen Basic Ghost Button1 by iwamoto (@iwamotosoichiro) on CodePen.
ベーシックなボタン2
両端が丸なので四角のボタンより柔らかい印象になります。こちらも派手なアニメーションとかはなくベーシックなデザインですので割とどんな場合にも使います。
See the Pen Basic Ghost Button2 by iwamoto (@iwamotosoichiro) on CodePen.
カーソルを合わせると少し薄くなるボタン
この形もよくあるやつですよね。カーソルを合わせるとボタンが少し薄く透けるようになります。
See the Pen Ghost Button Opacity to 0.8 from 1 by iwamoto (@iwamotosoichiro) on CodePen.
矢印が動くボタン1
カーソルを合わせると色が変わるのと同時に右の矢印が微妙に動きます。矢印は疑似要素で作成しています。
See the Pen Arrow move button by iwamoto (@iwamotosoichiro) on CodePen.
まとめ
こちらの記事はネタができ次第随時更新しようと思います。ボタンは良く使うのでバリエーションは増やしておきたいですね。