フリマアプリ制作中、
アップした写真の 「削除ボタン」 押下時に
見た目に変化がないのは少々寂しかったので
「削除」らしくなってもらいます。

完成形

削除ボタンらしいUIにしていきます。

まずは削除ボタンを作る

.image-box{position:relative;.delete-btn{width:100%;background-color:lightblue;text-align:center;position:absolute;bottom:0;left:0;}}

現状は少々素朴な感じ。
※ jsは省略

マウスが乗った時の動きを記述

.delete-btn:hoverというカーソルが乗っている時の
スタイルを同列に記述します。

.image-box{position:relative;.delete-btn{width:100%;background-color:lightblue;text-align:center;position:absolute;bottom:0;left:0;}.delete-btn:hover{cursor:pointer;transform:scale(1.1,1.1);transition:all0.1sease;background-color:#ea352d;//背景色を赤にするcolor:#ffffff;//文字色を白に。}}

transformプロパティ

transformプロパティは、要素に対して移動、回転、伸縮、傾斜などの変形をさせる事ができます。
今回は scaleを使用して拡大させます。

scale()の中の数字には、X方向とY方向 (横, 縦)へ適用される変倍を記入します。
【拡大させる場合は 1以上を記入します】

そして、【transitionプロパティ】で変化の仕方を指定します。
今回だと変化の始まりから終わりが0.1s(秒)。

◉ cursorはマウスカーソルの形を指定するためのプロパティです。

以上で終了です。