【CSS】transformで機能に応じたUIにしたい。

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

完成形

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

まずは削除ボタンを作る

sample.scss

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

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

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

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

sample.scss

.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: all 0.1s ease;
    background-color: #ea352d;  //背景色を赤にする
    color:#ffffff;  //文字色を白に。
  }
}

transformプロパティ

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

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

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

---

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

---

以上で終了です。
ご覧いただきありがとうございました。