Merhaba arkadaşlar,

Web projelerinizde veya kişisel sayfalarınızda kullanabileceğiniz, görselliği ön plana çıkaran oldukça şık bir animasyonlu beğen butonu çalışmasını sizlerle paylaşıyorum.

Bu yapı sayesinde, bir resmin üzerine gelindiğinde veya tıklandığında (checkbox mantığı kullanılarak) estetik bir "beğen" ikonu animasyonu tetikleniyor. Tamamen CSS ve HTML odaklı olan bu çalışma, sitenizin kullanıcı etkileşimini artıracaktır.

Eğitim Videosu:

[Foruma üye olmadığınız sürece forum içeriğindeki bağlantıları görüntüleyemezsiniz. Foruma üye olmak için TIKLAYIN!]

HTML Kodları:

Kod:

<div class="box">
    <div class="box-image">
        <img src="https://images.unsplash.com/photo-1495232416988-d26458b7a5fb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80" alt="Resim">
        <p>ABONE OL</p>
    </div>
    <input type="checkbox">
    <div class="like">
        <i class="fas fa-thumbs-up"></i>
    </div>
</div>

Kod:

 
<div class="youtube">
    <a class="watch" href="#" target="_blank"><span>Seyret</span></a>
    <a class="me" href="https://www.youtube.com/channel/UC-66vmW776afaHILFSHnVMA?sub_confirmation=1" target="_blank"><span>ABONE OL</span></a>
</div>

CSS Kodları:

Kod:

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

Kod:

 
body {
    background-color: #555555;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
 
.box {
    width: 400px;
    position: relative;
    overflow: hidden;
    background-color: #f1f1f1;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
 
.box img {
    width: 100%;
    display: block;
}
 
.box-image p {
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
    text-align: center;
    padding: 15px 0;
    color: #dc143c;
}
 
.box .like {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: #f1f1f1;
    font-size: 100px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}
 
.box input {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
    opacity: 0;
    cursor: pointer;
}
 
.box input:checked + .like {
    color: #dc143c;
    transform: translate(-50%, -50%) scale(1.5);
}
 
.box:hover > .like {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.8;
}

Not: İkonların düzgün görünmesi için projenize FontAwesome kütüphanesini dahil etmeyi unutmayın.

İyi çalışmalar, takıldığınız yer olursa konu altından sorabilirsiniz.