i am trying to push the pseudo element to the left with negative value of the margin left when the p-CodePudding

   <!-- how to solve this -->

    <!-- language: lang-html and css-->

     <!DOCTYPE html>
     <html>
     <head>
     <style>

here is styled the button and gived it a relative position

 .button {
  position: relative;
  background-color: #4CAF50;
  border: none;
  font-size: 28px;
  color: #FFFFFF;
  padding: 20px;
  width: 200px;
  text-align: center;
  transition-duration: 0.4s;
  text-decoration: none;
  
  cursor: pointer;
 }

here I created the pseudo element and margin-left is working as the button is not in the active situation

 .button:after {
  content: "";
  background: #f1f1f1;
  display: block;
  position: absolute;
  padding-top: 100%;
  width: 70%;
  margin-left: 40px !important;
  margin-top: -120%;
  opacity: 0.7;
  transition: all 3s
 }

and here where is my problem margin-left is not working when the button is active

 .button:active:after {
      margin-top: 0;
      margin-left: -20px;
      opacity: 1;
      transition: 2s
     }
     </style>
     </head>
     <body>

    <h2>Animated Button - Ripple Effect</h2>

    <button >Click Me</button>

    </body>
    </html>


<!-- what could I do to solve this problem -->

what is the matter

CodePudding user response：

Like this?

.button {
        position: relative;
        background-color: #4caf50;
        border: none;
        font-size: 28px;
        color: #ffffff;
        padding: 20px;
        width: 200px;
        text-align: center;
        transition-duration: 0.4s;
        text-decoration: none;

        cursor: pointer;
      }

      .button:after {
        content: "";
        background: #f1f1f1;
        display: block;
        position: absolute;
        padding-top: 100%;
        width: 70%;
        margin-left: 40px;
        margin-top: -120%;
        opacity: 0.7;
        transition: all 3s;
      }
      .button:active:after {
        /* margin-top: 0; */
        margin-left: -20px;
        opacity: 1;
        transition: 2s;
      }

    <h2>Animated Button - Ripple Effect</h2>

    <button >Click Me</button>

CodePudding user response：

Here's your problem:

.button::after {

  margin-left: -20px; !important;
}

The !important value overrides anything that tries to change: .button::after { margin-left: That would include this:

.button:active::after {
 
  margin-left: 0
}

That's exactly why the use of !important has always been discouraged. If you try to learn anything from W3School, be aware that their code is far from perfect. In the example below, the !important is commented out and .button:active::after has a -40px left margin -- now the fX is upside down.

.button {
  position: relative;
  width: 200px;
  padding: 20px;
  border: none;
  font-size: 28px;
  text-align: center;
  color: #FFFFFF;
  background-color: #4CAF50;
  overflow: hidden;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button::after {
  content: "";
  position: absolute;
  display: block;
  margin-left: -20px; /*!important;*/
  margin-top: -120%;
  padding-top: 300%;
  padding-left: 350%;
  background: #f1f1f1;
  opacity: 0;
  transition: all 0.8s
}

.button:active::after {
  margin-left: -40px; /* change to margin: -40px for different fx */
  padding: 0;
  opacity: 1;
  transition: 0s
}

<h2>Animated Button - Ripple Effect</h2>

<button >Click Me</button>