CSS ile Diagonal Swipe Button

CSS kullanarak diyagonal kaydırmalı bir düğme oluşturmak, kullanıcı arayüzünüze ilgi çekici bir unsur eklemenin harika bir yoludur. Bu düğmeler, menü öğelerini, harekete geçirici mesajları veya diğer etkileşimli öğeleri göstermek için kullanılabilir.

Ek Özellikler:

• Düğme Rengi: background-color özelliğini kullanarak düğmeninizin rengini değiştirebilirsiniz.
• Metin Rengi: color özelliğini kullanarak düğmeninizdeki metnin rengini değiştirebilirsiniz.
• Kenarlık: border özelliğini kullanarak düğmeniniz için bir kenarlık ekleyebilirsiniz.
• Yazı Tipi: font-family ve font-size özelliklerini kullanarak düğmeninizdeki metnin yazı tipini ve boyutunu değiştirebilirsiniz.
• Gölgeler: box-shadow özelliğini kullanarak düğmeninizin etrafına gölgeler ekleyebilirsiniz.

CSS ile Diagonal Swipe Button için küçük bir örnek hazırladım. Örneği şuradan inceleyebilirsiniz. CSS Diagonal Swipe Button (codepen.io) Gerekli kodları aşağıda paylaşıyorum.

HTML

<button class="btn">
    Mobil Mucit
</button>

CSS

.btn {
    color: orangered;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid orangered;
    padding: 20px 40px;
    font-size: 25px;
    font-weight: bold;
    background: transparent;
    position: relative;
    transition: all 1s;
    overflow: hidden;
}
.btn:hover {
    color: white;
}
.btn::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    top: 0;
    left: -40px;
    transform: skewX(45deg);
    background-color: orangered;
    z-index: -1;
    transition: all 1s;
}

.btn:hover::before {
    width: 160%;
}