Cara Membuat Animated Ripple Effect Button dengan HTML CSS

Sebuah kata maaf memang tidak bisa menyelesaikan masalah, tapi kata maaf mampu mengurangi rasa sakit. Oke pada kesempatan kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Membuat Animated Ripple Effect Button dengan HTML CSS.

Pada tutorial-tutorial saya sebelumnya, saya sudah memberitahukan cara membuat animated button dengan banyak variasi. Nah kali ini saya akan memberitahukan kepada kalian Cara Membuat Animated Ripple Effect Button dengan HTML CSS. Berikut caranya:

Seperti biasa, pertama-tama siapkan file index.html nya.

Kemudian, isi di bagian <body> tag-tag HTML seperti berikut.

<body>

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

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

</body>

Setelah itu, isi untuk CSS nya.

.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: #90EE90;
    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
}

Bagaimana teman-teman? Cukup mudah bukan?

Sekian untuk tutorial kali ini tentang Cara Membuat Animated Ripple Effect Button dengan HTML CSS.

Semoga bermanfaat, terima kasih.

Cara Membuat Animated Ripple Effect Button dengan HTML CSS

Kategori