افزودن هاور افکت بر روی دکمه و لینک با استفاده از شبه عناصر pseudo elements در css

در این نوشته می خواهیم با استفاده از شبه عناصر (pseudo-elements) before:: و after:: در css، یک افکت برای زمان قرار گرفتن ماوس روی دکمه و لینک (هاور افکت) ایجاد کنیم.

1- هاور افکت برای دکمه با استفاده از شبه عنصر (pseudo element)

ابتدا با html آغاز می کنیم:

<button class="cta-1">
   <span>Button Hover</span>
</button>

در اینجا ما یک دکمه با کلاس cta-1 داریم. داخل این دکمه یک span به همراه متنی درون آن قرار دارد.

حال بیایید کمی css اضافه کنیم:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-size: 62.5%;
    font-family: 'Roboto', sans-serif;
}

کد بالا برخی از استایل ها که به صورت پیش فرض در عناصر قرار دارند را حذف می کند.

حالا استایل اصلی را به دکمه خود اضافه کنیم:

.cta-1 {
    position: relative;
    padding: 12px 24px;
    border: none;
    font-size: 1.6rem;
    background-color: #E0E7FF;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.cta-1:active, .cta-1:focus{
    outline: none;
}

.cta-1 span{
    position: relative;
    color: #4F46E5;
    transition: all 0.6s ease;
}

در اینجا ما برای دکمه و span درون آن، موقعیت را relative قرار می دهیم تا بعدا در شبه عنصر before:: آن را به absolute تغییر دهیم. 

بعد از قرار دادن این کدها، دکمi ما به صورت زیر خواهد بود:

شبه عنصر (pseudo-element)

- برای ایجاد هاور افکت از شبه عنصر before:: در دکمه استفاده می کنیم

- سپس طول و عرض و موقعیت را تنظیم می کنیم

- پس از آن transform: scaleX(0)  transform-origin: 100% را نیز اضافه می کنیم

خب، بیایید اینها را به css  اضافه کنیم:

.cta-1::before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: #4F46E5;
    transform: scaleX(0);
    transform-origin: 100%;
    transition: transform 0.6s ease;
}

هاور افکت

برای ایجاد هاور افکت تنها مقیاس شبه عنصر before:: و رنگ span را در hover: تغییر می دهیم.

.cta-1:hover::before  {
    transform-origin: 0;
    transform: scaleX(1);
}
.cta-1:hover span{
    color: #E0E7FF;
}

نتیجه:

2- هاور افکت روی لینک با استفاده از شبه عنصر (pseudo element)

 برای انجام این کار بر روی لینک، مراحل کاملا مشابه است. برای این کار کافیست کدهای زیر را قرار دهید:

<a href="#" class="link-1">Link Hover</a>

.link-1 {
    position: relative;
    color: #475569;
    font-size: 1.8rem;
    text-decoration: none;
    transition: all 0.3s ease;
}
 .link-1::after {
    content: '';
    width: 100%;
    position: absolute;
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: #4F46E5;
    transform: scaleX(0);
    transform-origin: bottom left;
    transition: all 0.3s ease;
  }
 .link-1:hover{
      color: #4F46E5;
  }

  .link-1:hover::after {
    transform: scaleX(1);
  }

نتیجه:

به همین سادگی. امیدوارم این نوشته برای شما مفید باشد.