Cara Membuat Animated Ripple Effect Button dengan HTML CSS
Sebuah kata maaf memang tak dapat menyelesaikan masalah, tapi kata maaf mampu mengurangi rasa sakit. Oke di kesempatan kali ini saya akan berbagi ilmu kepada kalian mengenai bagaimana Cara Merancang Animated Ripple Effect Button dengan HTML CSS.
Di tutorial-tutorial saya sebelumnya, saya telah memberitahukan cara membangun animated button dengan banyak variasi. Nah kali ini saya akan memberitahukan kepada kalian Cara Merancang Animated Ripple Effect Button dengan HTML CSS. Berikut caranya:
Seperti biasanya, 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 bagi 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? Lumayan gampang bukan?
Demikianlah bagi panduan kali ini mengenai Cara Merancang Animated Ripple Effect Button dengan HTML CSS.
Semoga bermanfaat, terima kasih.
Sumber https://kursuswebsite.org
