I attempted to shift the pseudo element to the left by using a negative margin-left value when the parent element is active, however, the desired effect was not achieved

   <!-- how do I troubleshoot this issue? -->

    <!-- languages used: HTML and CSS-->

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

This section styles the button and gives 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 have created a pseudo-element with the margin-left property working when the button is not in the active state.

 .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
 }

The problem arises where the margin-left property does not work 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 class="button">Click Me</button>

    </body>
    </html>


<!-- How can I resolve this issue? -->

Please help me understand what could be causing this problem.

htmlcss

Answer №1

Identifying the Issue:

.button::after {

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

The use of !important in CSS overrides any other declarations, as seen here with .button::after { margin-left: . This can cause conflicts such as:

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

This highlights why it's advised to avoid using !important. Code from sources like W3Schools may not always be flawless. In this sample, the !important is disabled and .button:active::after has a left margin of -40px, resulting in an inverted effect.

.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 class="button">Click Me</button>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modifying CSS dynamically is ineffective on Chrome

My webpage is experiencing a large left margin due to a global style sheet that cannot be modified. The margin is inline and cannot be changed in my print style. I found a jQuery solution that works in Firefox and IE, but unfortunately not in Chrome. jquer ...

javascriptjquerycssgoogle-chromeprinting

Can three photos be included in this code?

For this particular task, I am required to select 3 photos and create a button that allows me to cycle through them. The challenge lies in being able to select the photos from my file directory. Any assistance would be greatly appreciated! :D <!DOCTYPE ...

javascripthtml

Is it possible to create a button on my website that, when clicked, sends data to my Python script?

I need some help with my project - I'm trying to figure out how to create a button on my website that, when clicked, will display a string in my Python terminal. Can anyone offer some guidance on how to achieve this? Thanks in advance! ...

pythonhtml

Change the CSS property to override the text-overflow with ellipsis

In my specific scenario, I need to override the default ellipsis behavior that adds '...' to text when using 'text-overflow: ellipsis', and instead use two stars **. Is there a way to achieve this using only Pure CSS? It is important t ...

css

Conceal different text when a div with a specific class includes particular text

Is there a way to dynamically add a class to a div based on the content of another div on the same page? Here is a snippet of my HTML: window.addEventListener("load", () => { let b = document.getElementsByClassName('aw-property-data-item') ...

javascripthtmlcss

Add a fresh column in the table that includes modified values from an existing column, affected by a multiplication factor provided through a text input

I'm currently working on a Laravel website where I have a pricing table sourced from a database. The Retail Price column in this table serves as the base for calculating and populating a Discount Price column using a multiplier specified in a text inp ...

javascripthtmljquerylaravel

Manipulating the DOM by nesting an icon within a button element in HTML

Currently working on my todo list project and I have a question about using innerHTML. I'm curious if I can include an icon inside of a button tag like this: btn.innerHTML = '<i class="fas fa-times fa-lg"></i>'; So, wo ...

javascripthtmlcsswebdom

What is causing the div tag to not align with the top of the body?

Here is my HTML code: <html> <body id="body"> <div id="content"> <div id="head1"> <h3 id="cpsir">CPSIR-CM</h3> </div> </div> </html> This is the CSS code: #body{ background:#0F657D; } #conten ...

htmlcss

Tips for organizing and centering Kendo radio buttons within a Bootstrap grid and form structure

After trying the Bootstrap method [3] without success, I am now implementing the radios according to approach [1]. Even after applying the fix for box-sizing as suggested in [2], it doesn't seem to resolve the issue. <div class="panel panel-defa ...

htmlcsstwitter-bootstrapkendo-ui

Is it possible to utilize the Worker class within React Native?

Is it feasible to execute the following code within a react-native environment? let worker = new Worker("./module.js", {type: "module"}); If this does run the module in a background thread, who is managing the thread marshaling process? Given that the Wo ...

node.jshtmlmultithreadingreact-native

Occasions focused on the <input type="file"> feature

Looking for a way to write a file input in React that accepts CSV files, validates them, and prevents upload if there are errors? Check out the code snippet below: <CustomInput type="file" id="fileBrowser" name="file" label={filename || 'Choos ...

javascripthtmlreactjs

What is the best way to add an Angular directive to ever-changing HTML content?

When creating dynamic HTML content, I am using the mark tag to highlight text. Depending on a condition, I want to apply one of two styles. To specify a CSS class, I can do it this way: <mark class='selected'> However, when trying to use ...

htmlangularjsng-class

Simultaneously shifting focus to carousel display and transitioning between items

I'm currently working with a carousel widget in the Hugo framework and have a basic HTML question. I'd like to create a hyperlink that not only changes the item of the carousel but also focuses on it. Here is my current code snippet: <a href ...

javascripthtmlwidgetcarousel

Utilizing flexbox to enable unordered lists to wrap based on content

Here is the current code I have: HTML return ( <Card {...props} className={` ${classes.root} ${rootClassName}`} onClick={onClick}> {children} <div className={classes.box}> <ul> {props.pizzas?.topp ...

cssreactjsflexboxmaterial-ui

The animation loop completes and restarts from the initial keyframe

I have a CSS animation that I want to play through once and then stop at the final keyframe. However, currently it keeps returning to the initial keyframe and stopping there instead of reaching the end. The animation involves a title heading that gradually ...

csswordpresscss-animationselementorwebkit-animation

JavaScript - reveal/ conceal function

Just starting out with JavaScript and feeling a bit lost with this homework assignment - "I need to modify the page so that all images are hidden until the “start” button is clicked. After clicking the start button, it should change to a stop button d ...

javascripthtml

The PHP DOM feature is inserting an additional <p> element along with <html> and <body> tags

When it comes to displaying different images for desktop and mobile users based on their device, I have implemented a function in my index.php file. The code snippet from my index.php file: <!DOCTYPE html> <html class="no-js" lang="en"> <h ...

phphtmldomdomdocument

Learning to extract information from a JSON file with various key and value combinations

I am facing a challenge with my JSON data file, which contains UserIDs as keys and Passwords as values. My goal is to use JavaScript for validation by reading this JSON file. The structure of my JSON is as follows: IDsNPass = '[{"A":"A15"},{"B":"B15" ...

javascripthtmljson

Is your Material UI Responsive Appbar overlapping the main content? Looking for a solution to address this issue?

Currently, I am in the process of developing a website that incorporates a responsive-based app bar with an attached drawer. The design concept I am following can be located at this link, which I have been modifying to suit my needs. However, I have encoun ...

javascripthtmlreactjsmaterial-ui

I am curious to see the number of people who have made their selection

I am currently using JavaScript to alter the text value from "select" to "selected". My next step is to include the selected text in a cart. Can you please provide some guidance? Thank you in advance. PHP CODE : <a class='btn slct' href=&ap ...

javascriptphpjqueryhtml