asked on

CSS Question

What does the following measurement position the ".button:after" ? I still can't get how to create the ripple effect with the these position mesurement (padding-top: 300%; padding-left: 350%; margin-left: -20px !important; margin-top: -120%;) ?? How can it create a transparent layer over the existing button, without moving the position of the existing button... Thx

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    position: relative;
    background-color: #4CAF50;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

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

.button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}
</style>
</head>
<body>

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

<button class="button">Click Me</button>

</body>
</html>

Open in new window

Juan Ocasio

The effect may make more sense if you remove overflow: hidden from the .button Class. The measurements are starting the transition from the bottom left of the button and extending it upwards and out. The overflow:hidden keeps it contained within the block of the button.

Juan Ocasio

The other thing you will notice is when you remove overflow:hidden, the actual effect can be captured outside of the button

AXISHK

ASKER

What does the following measurement mean ? Does it count from the button size, or just the word inside the button ? Thx

(padding-top: 300%; padding-left: 350%; margin-left: -20px !important; margin-top: -120%;)

Juan Ocasio

It's measuring outside the button. So the effect actually extend outside the button, but with overflow:hidden, it only shows inside the button because anything that flows outside the button is hidden. Try changing some of the values and you'll see. For example, margin-left is compensating for the padding on the button. Change on of the values (the padding) and you'll see. They adjust the margin-left and you see what happens. Likewise with the padding

AXISHK

ASKER

Base on the setting defined in ".button", the measurement is attached in the diagram.

CSS ".button:after" defined another part,
padding-top : 300%, does it mean the padding top = 20px * 300% (ie. the padding will be lower
padding-left : 350% does it mean the padding left = 20px *350% (ie. padding will be move left)
margin-left: -20px , does it mean the margin of the button will be move left for 20px
margin-top: -120%;, how does it calculate as the margin top of the button is 0 ??

This is only define the position of the element but where does it define the width of the ripple and draw it after the "button" ??

Thx again.
diagram.png

Juan Ocasio

the button:after and the trasition is defining the ripple. The best way to see it is by modifying the properties and you can see what effect thet have on both the button and the trasitional ripple..

AXISHK

ASKER

Already taken away overflow: hidden;, how seem like the ripple effect is change within the button... without extended over the button. I still can't get how the
measurement is reference....

Can you send me the code such that I can see the orginal size of the ripple (without transition ) and the hover button overlay with each other ?

Thx again.
code.png

ASKER CERTIFIED SOLUTION

Juan Ocasio

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

AXISHK

ASKER

Thx