How To Create Ripple Animation Button In HTML CSS And Javascript | letsbug

     Hi, today we are creating a ripple animation on a button using HTML CSS and Javascript. We are going to implement this feature in a way that we can use the code multiple times basically D.R.Y. 

    Ripple Animation Button

code:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ripple Effect</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./script.js" defer  ></script>
</head>
<body>
    <button class="ripple-btn">CLICK me</button>
    <button class="ripple-btn">hello</button>
</body>
</html>

styles.css

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

body{
    min-height: 100vh;
    display: grid;
    place-items: center;
    font-family: system-ui;
}

.ripple-btn{
    appearance: none;
    position: relative;
    display: inline-grid;
    place-items: center;
    isolation: isolate;
    font-size: 3em;
    font-weight: 500;
    padding: 1em 3em;
    text-transform: uppercase;
    background-color: transparent;
    border: 5px solid currentColor;
    border-radius: 0.125em;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 10px 10px 5px red;
}

.ripple-btn::after{
    content: ' ';
    position: absolute;
    top:var(--y);
    left:var(--x);
    transform: translate(-50%, -50%) scale(0);
    width: 200%;
    display: block;
    z-index: -1;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: red;
    opacity: .35;
    transition: transform .5s;
}

.ripple-animation::after{
    animation: ani 500ms;
}

@keyframes ani {
    0%{
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.5;
    }
    100%{
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

script.js

const buttons = document.querySelectorAll('.ripple-btn')
buttons.forEach(btn => {
    btn.addEventListener("click", (e) => ripple(e, btn))
})


function ripple(event, element) {
    let posX = event.offsetX;
    let posY = event.offsetY;
    
    element.style.setProperty("--x", `${posX}px`)
    element.style.setProperty("--y", `${posY}px`)

    element.classList.add('ripple-animation')
    element.addEventListener("animationend", () => {
        element.classList.remove("ripple-animation")
    }, {once:true})
    
}

output:

Ripple Animation Button In HTML CSS And Javascript | letsbug


Thankyou

Comments

Post a Comment

Categories

A Triumph of Surgery Agriculture Array Array Left Rotation Auto Completing Input Basic Question Answers BBA.CA BCA Beehive Big Data
Big Data Analytics Binary Search Binary Search Tree Binary To Decimal binary tree Breadth First Search Bubble sort C Programming c++ Chemical Reaction and equation class 10 class 10th Class 9 Climate Complex Numbers computer network counting sort CSS Cyber Offenses Cyber Security Cyberstalking Data Science Data Structures Decimal To Binary Development diamond pattern Digital Marketing dust of snow Economics Economics Lesson 4 Email Validation English fire and ice Food Security in India Footprints Without feet Forest And Wildlife Resources game Geography Geography lesson 6 glassmorphism Glossary Graph HackerRank Solution hindi HTML image previewer India-Size And Location Insertion Sort Internet Network Status Interview Questions Introduction to cyber crime and cyber security IT javascript tricks json to CSV converter lesson 2 lesson 1 lesson 2 Lesson 3 Lesson 6 lesson 7 Life lines of National Economy life processes Linear Search Linked List lowest common ancestor Machine Learning MCQs median in array Merge sort min and max of two numbers Moment Money and Credit My Childhood Natural Vegetation and Wildlife NCERT Network connectivity devices Network Models Network Security No Men Are foreign Node.js operator overloading P5.js PHP Physical features of India Population Prime Numbers python Quick sort R language Rain on the roof Regular Expression Resources and development reversing array saakhi science Searching Algorithm Selection sort Social Media Marketing social science Software Engineering Software Testing Sorting Algorithm Stacks staircase pattern System Concepts Text Recognition The last Leaf time converter Time Passed From A Date Todo List App Tree Trending Technologies Understanding Economic Development username and password video player Visualization water resources Wired And Wireless LAN साखी
Show more

Popular Posts

Big Data MCQs(multiple choice questions) with answers - letsbug

     In this article we have 30  MCQs(multiple choice questions) on Big Data with answers. 1. According to analysts, for what can traditional IT system provide a foundation when they're integrated with big data technologies like Hadoop?  Big data management and data mining  Data warehousing and business intelligence  Management and business  Collecting and storing unstructured data Answer: 1 2. What are the main components of Big Data? MapReduce HDFS YARN All of these     Answer: 4 3. What are the different features of Big Data Analytics?  Open-Source  Scalability  Data Recovery  All of the above Answer: 4 4. According to analysts, for what can traditional IT systems provide a foundation when they're integrated with big data technologies like Hadoop? Big data management and data mining  Data warehousing and business intelligence  Management of Hadoop clusters  Collecting and storing unstructured data Answer: 2 5. What are the four V's of Big Data?. Volume Velocity Variety
Read More »

Digital Marketing MCQ(Multiple Choice Questions) with Answers | part 1 | letsbug

      Digital marketing is a subset of marketing that is used to promote a brand or product using one are more electronic technologies. The goal is to influence target consumers in taking action .     Digital marketing is the term used for the targeted, measurable, and interactive marketing of products or services using digital technologies to reach the viewers, turn them into customers, and retain them.       Digital marketing is on the rise and here are some Digital marketing MCQs to get you running in this field on new age media. 1. Which of the following describes E-commerce  Doing Business electronically   Doing business  Sale of goods   All of the above Answer: 1 : Doing Business electronically 2. Which of the following is not the type of E-commerce. B2C E2E B2B C2C  Answer: 2 : B2C 3. Which of the following is the benefit of E-commerce. Reduced Prices Global marketplace Any time access All of the above   Answer: 4 : All of the above 4. Which of the following is not the adva
Read More »

Software Engineering MCQs questions with answers - letsbug

Introduction to Software Engineering MCQs 2021 for BBA.CA, BCA and B.Tech students 1. What is a Software? Software is set of programs. Software is documentation and configuration of data. Software is set of programs, documentation & configuration of data None of the above Answer: 3 2. Which of  the following is not the characteristic of Software? Software does not wear out Software is flexible Software is not manufactured Software is always correct Answer: 4 3. Layers in layered technology of software are ...... Process, Methods, Tools Internal, External, Central Inner, Outer, Middle Procedure, Methods, Task Answer: 1 4. Which is not McCall's software quality factor? Product Revision Product Transition Product Operation Product Generation Answer: 4 5. Which is characteristic of software process? Understanding Visibility Reliability All of the above Answer: 4 6. Which of the five Generic Software Engineering Framework Activites? Communication, Planning, Modelling, construction,
Read More »