Button Hover Effec t

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <button type="button">my button</button>
    </div>
</body>

</html>

.container {
    max-width: 500px;
    width: 100%;
    max-height: 500px;
    height: 100%;

    display: flex;
    justify-content: center;
    align-content: center;
}

button {
    max-width: 161px;
    width: 100%;
    height: 54px;
    border-radius: 10px;
    font-size: 17px;
    line-height: 20px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    outline: 0;
    padding: 8px;
    background-color: transparent;
    transition: all 0.12s linear;
    transform: scale(1);
    font-weight: 400;
    position: relative;



    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      border-radius: 10px;
      transition: all 0.12s linear;
      transform: scaleX(1);
      background-color: green;
    }

    &:hover {
      color: red;

      &::after {
        background-color: blue;
        transform: scale(1.14);
      }

    }
  }

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site