SnippetUI
← Back to snippets

Кнопка с эффектом мерцания

Красивый компонент кнопки, который излучает полосу света (эффект мерцания) при наведении курсора мыши и периодически.

HTMLCSSTailwind CSSReact

Это красивый компонент кнопки, который привлекает внимание полосой света (эффект мерцания), которая течет при наведении курсора мыши и периодически. Идеально подходит для CTA (призыва к действию), когда вы хотите привлечь внимание пользователя.

Предварительный просмотр

Варианты использования и возможности

– Увеличьте коэффициент конверсии. Визуальное движение позволяет легко привлечь внимание пользователей, что делает его идеальным для важных призывов к действию (CTA), таких как кнопки регистрации и покупки.

  • Маленькая анимация: создает утонченное впечатление благодаря регулярному периодическому эффекту мерцания (отражения света), не слишком яркому.

  • Микровзаимодействия: кнопка будет слегка приподниматься при наведении курсора, и к ней будет добавлена ​​тень, чтобы подчеркнуть, что это кликабельный элемент.

##Ключевые моменты дизайна и UX (Design & UX)

  • Контраст и видимость: эффект усиливается за счет ярких полос света на темном фоне.

  • Производительность: анимация, в которой используются функции «трансформация» и «непрозрачность», минимизирует нагрузку на браузер и обеспечивает плавное движение.

  • Доступность: кольцо фокусировки («focus:ring») настроено соответствующим образом, поэтому статус можно визуально сообщать даже с помощью операций с клавиатурой.

Как настроить (Руководство по настройке)

  • Изменить цвет: вы можете настроить цвет подсветки, изменив rgba(255, 255, 255, 0,2) на цвет вашего бренда (например, rgba(59, 130, 246, 0,3)).

  • Регулировка скорости анимации: установка значения «3 с» для параметра «animation: shimmer-effect 3s Infinite;» на «2 с» заставит его двигаться быстрее, а установка «5 с» заставит его двигаться медленнее.

  • Реализация только с помощью Tailwind: добавив ключевые кадры в Tailwind.config.js, можно завершить реализацию только с помощью служебных классов Tailwind без использования пользовательских классов.

Код реализации (Реализация)

HTML & CSS (Tailwind CSS併用)

<button class="shimmer-btn text-slate-200 bg-slate-900 border border-slate-700/50 px-8 py-3 rounded-full font-medium transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-slate-500/20 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-950">

<span class="relative z-10 flex items-center gap-2">

  <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">

    <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />

  </svg>

  Get Started

</span>

</button>



<style>
.shimmer-btn {

  position: relative;

  overflow: hidden;

}



.shimmer-btn::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 50%;

  height: 100%;

  background: linear-gradient(

    90deg,

    transparent,

    rgba(255, 255, 255, 0.2),

    transparent

  );

  transform: skewX(-20deg);

  animation: shimmer 3s infinite;

}



@keyframes shimmer {

  0% { left: -100%; }

  20% { left: 200%; }

  100% { left: 200%; }

}
</style>

React (конфигурация попутного ветра)

Этот подход можно реализовать в компоненте React, расширив файл конфигурации Tailwind (tailwind.config.js).