Pinch Pinch - 16 days ago 8
CSS Question

CSS Button responding with a "beacon" as a click event

I want to create an event that is similar to what is done on the buttons on this page:

https://bootswatch.com/paper/#buttons

As you can see, a darker color kinda circles around inside the button on click.

What are these "events" called? And is it required to do it with jQuery or is this doable with just CSS? I can only come up with one name for this and that's just a click event beacon button, but after googling, I don't seem to find any results for this.

Answer

You can achieve this only by using css. No need to use jquery. You'll have to write a css for the .button, .button:after and the .button:active:after events (assume that button is your class name or the button).

Here is the css I have tried with

<!DOCTYPE html>
<html>
<head>
<style>
.button {
text-transform: uppercase;
    border: none;
    -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    position: relative;
   display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    /*-ms-touch-action: manipulation;*/
    /*touch-action: manipulation;*/
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 16px;
    font-size: 13px;
    line-height: 1.846;
    border-radius: 3px;
    
}

.button:after {
   content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: -webkit-radial-gradient(circle, #000000 10%, transparent 10.01%);
    background-image: -o-radial-gradient(circle, #000000 10%, transparent 10.01%);
    background-image: radial-gradient(circle, #000000 10%, transparent 10.01%);
    background-repeat: no-repeat;
    -webkit-background-size: 1000% 1000%;
    background-size: 1000% 1000%;
    background-position: 50%;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: background .5s, opacity 1s;
    -o-transition: background .5s, opacity 1s;
    transition: background .5s, opacity 1s;
}


.button:active:after {
    -webkit-background-size: 0% 0%;
    background-size: 0% 0%;
    opacity: .2;
    -webkit-transition: 0s;
    -o-transition: 0s;
    transition: 0s;
}
</style>
</head>
<body>

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

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

</body>
</html>

Comments