VibeCoderzVibeCoderz
Telegram
All Prompts
Primary Jelly Button preview
buttonprimaryanimatedjellyresponsivemodern

Primary Jelly Button

Анимированная кнопка с эффектом желе при наведении. Идеальна для основных действий, таких как 'Заказать' или 'Добавить в корзину'.

Prompt

<div class="jelly-button-component">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');.font-quicksand { font-family: 'Quicksand', sans-serif; }.jelly-btn { position: relative; border: none; border-radius: 45px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; color: white; font-family: 'Quicksand', sans-serif; font-weight: 500; text-decoration: none; background-color: rgb(151, 95, 255); box-shadow: rgb(210, 187, 253) 0px 10px 10px inset, rgba(5, 5, 5, 0.21) 0px 5px 10px, rgb(124, 54, 255) 0px -10px 10px inset; }.jelly-btn::before { width: 70%; height: 2px; position: absolute; background-color: rgba(250, 250, 250, 0.678); content: ""; filter: blur(1px); top: 7px; border-radius: 50%; }.jelly-btn::after { width: 70%; height: 2px; position: absolute; background-color: rgba(250, 250, 250, 0.137); content: ""; filter: blur(1px); bottom: 7px; border-radius: 50%; }.jelly-btn:hover { animation: jello-horizontal 0.9s both; transform: translateY(-2px); }@keyframes jello-horizontal { 0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } 100% { transform: scale3d(1, 1, 1); } }
  </style>
  <button class="jelly-btn gap-2 text-sm font-quicksand" style="width: 150px; height: 55px;">
    Order Now
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 transition group-hover:scale-105">
      <path d="M16 10a4 4 0 0 1-8 0"></path>
      <path d="M3.103 6.034h17.794"></path>
      <path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"></path>
    </svg>
  </button>
</div>
All Prompts