RIPPLE EFEKTLİ BUTON YAPIMI

118 Gösterim

RIPPLE EFEKTLİ BUTON YAPIMI


Hiçbir kütüphane olmadan, Vanilla JavaScript ile nasıl ripple efektli buton yapılır?

İlk önce ripple efekti nedir, bundan bahsedeyim. Ripple efekti, bir butona tıkladığınızda oluşan ve dalgaya benzeyen efekttir. Bu efekti kullanan firmalara Google'ı örnek verebiliriz. Google neredeyse bütün butonlarında bu efekti kullanmaktadır. Ben de, bu yazımda nasıl ripple efektli buton yapabilirsiniz bundan bahsetmek istiyorum. İlk olarak, eğer kodlara ulaşmak istiyorsanız bu bağlantıya gidebilirsiniz: https://codepen.io/fatihege/pen/abmgbXY


Öyleyse kodlarımıza geçelim.



HTML

<a href="#" class="btn">
Ripple 1
</a>

<a href="#" class="btn">
Ripple 2
</a>

Evet, HTML kodlarımız sadece bu kadar. Geri kalanını CSS ve JavaScript ile kolayca halledeceğiz.


CSS

/* Inter yazı tipini dosyaya dahil ediyoruz. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

/* Bütün elementlerin yazı tipini "Inter" yapıyoruz sonra ise dıştan ve içten öteleme değerlerini sıfırlıyoruz. */
* {
font-family: "Inter", sans-serif;
margin: 0;
padding: 0;
}

/* HTML gövdesinin minimum yüksekliğini ekran boyutu kadar yapıyoruz ve içindeki elementleri ortalamak için flexbox özelliğini kullanıyoruz. (Flexbox kullanmak zorunlu değildir.) En sonunda gövdemizin arkaplan rengini mor-mavi arası bir renk yapıyoruz. */
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #212440;
}

/*
Class'ı "btn" olan "a" elementlerimizin gerekli görünüş özelliklerini ayarlıyoruz.
*/
a.btn {
text-decoration: none;
color: #fff;
font-size: 25px;
font-weight: 300;
background: linear-gradient(90deg, #6900e0, #b10ee3);
padding: 20px 30px;
border-radius: 100ch;
display: inline-block;
position: relative;
overflow: hidden;
transition: box-shadow 0.35s;
margin-bottom: 20px;
}

/* JavaScript ile "a" etiketlerimizin içine "span" etiketleri ekleyeceğiz. İşte o "span" etiketlerinin görünüşlerini ayarlıyoruz. */
a.btn span {
width: 0;
height: 0;
padding: 0;
background: #fff;
position: absolute;
transform: translate(-50%, -50%);
animation: ripple 1s linear;
border-radius: 100%;
pointer-events: none;
}

/* "a" elementlerinin içindeki "span" elementlerine vereceğimiz animasyonu hazırlıyoruz. */
@keyframes ripple {
0% {
width: 0;
height: 0;
padding: 0;
opacity: 0.78;
}

100% {
padding: 200px;
opacity: 0;
}
}


JavaScript

// Class'ı "btn" olan elementlerimizin hepsini bir değişkene atıyoruz.
var btns = document.querySelectorAll(".btn");

// Fare imlecinin pozisyonunu alacağımız değişkenleri oluşturuyoruz.
var x, y;

// "btns" dizisinin içindeki bütün elemanları gezerek onlara geçici olarak "btn" ismini veriyoruz.
btns.forEach(function (btn) {
btn.addEventListener("click", function (e) {
// Butona tıklandığında fare imlecinin pozisyonunu "x" ve "y" değişkenlerine atıyoruz.
x = e.clientX - e.target.offsetLeft;
y = e.clientY - e.target.offsetTop;

// Bir "span" elementi oluşturuyor, ve
var rip = document.createElement("span");

// "span" elementlerinin pozisyonunu belirliyoruz.
rip.style.left = x + "px";
rip.style.top = y + "px";

// "btn" elementinin sonuna, oluşturulan "span" elementlerini ekliyoruz.
this.appendChild(rip);

// "a" elementinin içine oluşturulan "span" elementini 1010 milisaniye sonra siliyoruz.
setTimeout(function () {
rip.remove();
}, 1010);
});

// Butona tıklandığı anda bir gölge veriyoruz.
btn.addEventListener("mousedown", function () {
this.style.boxShadow = "0 11px 15px -10px rgba(28, 28, 28, 0.9)";
});

// Butona yapılan tıklama çekildiği anda gölgeyi renksiz hale getiriyoruz.
btn.addEventListener("mouseup", function () {
this.style.boxShadow = "0 11px 15px -10px rgba(28, 28, 28, 0)";
});

// Eğer butona tıklama yapılıp, fare işaretçisi çekilirse, gölgenin takılmaması için fare butonun üzerinden ayrılır ayrılmaz gölgeyi renksiz yapıyoruz.
btn.addEventListener("mouseleave", function () {
this.style.boxShadow = "0 11px 15px -10px rgba(28, 28, 28, 0)";
});
});


Kodlarımız bu kadar. Zaten yorum satırları ile nerede ne yapılmış anlattım. Eğer aklınıza takılan bir şey olursa Instagram hesabımdan bana sorabilirsiniz.


Fatih EGE

Fatih EGE

Web Geliştirici