HTML/CSS

【CSSだけ!】|コピペでできる、シンプルでオシャレなボタンデザイン

PC画像

コピペで実装できるボタンデザイン一覧です。
ボタンを作成した再は、定期的にこのページに更新していきます。

いちごぱんつ
いちごぱんつ
コピペ用にどんどん増やしていくよ!

transitionを使ってhover時にふわっと色が変わるボタン

See the Pen
KKVMeWM
by Siroari (@ichigo-pantsu)
on CodePen.

box-shadowを使ってhoverの動きを付けるボタン

See the Pen
zYrBaaW
by Siroari (@ichigo-pantsu)
on CodePen.

letter-spacingを使ってhover時横に広がるボタン

See the Pen
zYrBaQL
by Siroari (@ichigo-pantsu)
on CodePen.

transformを使って左から右に背景色を移動させる

See the Pen
btn_slideLeft
by Siroari (@ichigo-pantsu)
on CodePen.

いちごぱんつ
いちごぱんつ
overflow: hidden;部分を一旦非表示にさせると、どのように背景色が動いてるかわかりやすいよ!I

transformを使って下から上に背景色を移動させる

See the Pen
btn_slideBottom
by Siroari (@ichigo-pantsu)
on CodePen.