Home
Arnav K
Gold Premium Button

Gold Premium Button

🪙 Glowing Premium BIP Gold Button in pue Tailwind CSS

This tailwind example is contributed by Arnav K, on 23-Jan-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Button

Author Arnav K

5.6k

Fork Fullscreen

<button
  class="brightness-150 dark:brightness-100 group hover:shadow-lg hover:shadow-yellow-700/60 transition ease-in-out hover:scale-105 p-1 rounded-xl bg-gradient-to-br from-yellow-800 via-yellow-600 to-yellow-800 hover:from-yellow-700 hover:via-yellow-800 hover:to-yellow-600"
>
  <div
    class="px-6 py-2 backdrop-blur-xl bg-black/80 rounded-xl font-bold w-full h-full"
  >
    <div
      class="group-hover:scale-100 flex group-hover:text-yellow-500 text-yellow-600 gap-1 inline"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.8"
        class="w-6 h-6 stroke-yellow-600 group-hover:stroke-yellow-500 group-hover:stroke-{1.99}"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"
        ></path>
      </svg>
      Premium
    </div>
  </div>
</button>

Related Examples

Interactive Toggle Switch with Smooth Animation
A stylish toggle switch component built with Tailwind CSS and enhanced with minimal JavaScript. This toggle switch features smooth color transitions, dynamic text ("ON/OFF"), and a moving indicator ball, providing a visually appealing and functional design. Ideal for modern web interfaces where toggling functionality is required. Easily customizable for various use cases.

Author:
SHARIFUL ISLAM

1 year ago

1.8k
Call to action buttons
Pair of active primary and secondary buttons. Elevated buttons w/ border bottom

Author:
Hyun-woo Cho

2 years ago

9.8k
Continue with Discord button
Login with the Discord button for social login

Author:
Anonymous

1 year ago

3k
strawbery
by salvator

Author:
Baraka Salvator

8 months ago

904
Gradient border button

Author:
Leon Bachmann

3 years ago

16.3k
Dismissible Buttons

Author:
Manon Daniel

3 years ago

9.3k
Flame Button

Author:
Carlos Adrian Garcia

1 year ago

2.8k
Premium Button Collection with 12 Unique Animations
Collection de 12 boutons premium avec animations uniques : glow, shine, slide, 3D push, neon pulse, glassmorphism, gradient border et plus. Chaque bouton a son propre effet hover. 100% Tailwind CSS, no JavaScript.

Author:
Dolbymat

2 months ago

298
Plug and Play Animated Button for Hero Statements / Landing Pages
REMOVE the bg-black from the outside <button/> div, if you are already using a black background. Besides this, the button is plug and play! Know errors: You may need to remove animate-spin for your usecase, depending on framework rendering. For SvelteKit, animate-spin is NOT needed. But the [animation:spin_4s]... is always necessary for a smooth effect. Check out my profile to join my community online or add me on LinkedIn.

Author:
Coastal UI

1 year ago

2k
Button
Material Button

Author:
Akram Khan

1 year ago

2.3k
Background gradient changing button
Automatic and continuously gradient-changing button. Cyclic color changing button.

Author:
Ingrid Schulz

2 years ago

11.2k
Floating buttons examples
Bottom-Right Corner, Bottom-Left Corner, Top-Left Corner, Top-Right Corner, Center, Bottom-Center

Author:
Livia Flores

2 years ago

25.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components