button

This tailwind example is contributed by Lokesh H, on 12-Aug-2026. Component is made with Tailwind v3.4. It is responsive.

Button

Author Lokesh H

Tailwind v3.4 93 1

Fork Fullscreen

<button class="button">
  <div class="bg"></div>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 342 208"
    height="208"
    width="342"
    class="splash"
  >
    <path
      stroke-linecap="round"
      stroke-width="3"
      d="M54.1054 99.7837C54.1054 99.7837 40.0984 90.7874 26.6893 97.6362C13.2802 104.485 1.5 97.6362 1.5 97.6362"
    ></path>
    <path
      stroke-linecap="round"
      stroke-width="3"
      d="M285.273 99.7841C285.273 99.7841 299.28 90.7879 312.689 97.6367C326.098 104.486 340.105 95.4893 340.105 95.4893"
    ></path>
    <path
      stroke-linecap="round"
      stroke-width="3"
      stroke-opacity="0.3"
      d="M281.133 64.9917C281.133 64.9917 287.96 49.8089 302.934 48.2295C317.908 46.6501 319.712 36.5272 319.712 36.5272"
    ></path>
    <path
      stroke-linecap="round"
      stroke-width="3"
      stroke-opacity="0.3"
      d="M281.133 138.984C281.133 138.984 287.96 154.167 302.934 155.746C317.908 157.326 319.712 167.449 319.712 167.449"
    ></path>
    <path
      stroke-linecap="round"
      stroke-width="3"
      d="M230.578 57.4476C230.578 57.4476 225.785 41.5051 236.061 30.4998C246.337 19.4945 244.686 12.9998 244.686 12.9998"
    ></path>
    <path
      stroke-linecap="round"
      stroke-width="3"
      d="M230.578 150.528C230.578 150.528 225.785 166.471 236.061 177.476C246.337 188.481 244.686 194.976 244.686 194.976"
    ></path>
    <path
      stroke-linecap="round"
      stroke-width="3"
      stroke-opacity="0.3"
      d="M170.392 57.0278C170.392 57.0278 173.89 42.1322 169.571 29.54C165.252 16.9478 168.751 2.05227 168.751 2.05227"
    ></path>
    <path
      stroke-linecap="round"
      stroke-width="3"
      stroke-opacity="0.3"
      d="M170.392 150.948C170.392 150.948 173.89 165.844 169.571 178.436C165.252 191.028 168.751 205.924 168.751 205.924"
    ></path>
    <path
      stroke-linecap="round"
      stroke-width="3"
      d="M112.609 57.4476C112.609 57.4476 117.401 41.5051 107.125 30.4998C96.8492 19.4945 98.5 12.9998 98.5 12.9998"
    ></path>
    <path
      stroke-linecap="round"
      stroke-width="3"
      d="M112.609 150.528C112.609 150.528 117.401 166.471 107.125 177.476C96.8492 188.481 98.5 194.976 98.5 194.976"
    ></path>
    <path
      stroke-linecap="round"
      stroke-width="3"
      stroke-opacity="0.3"
      d="M62.2941 64.9917C62.2941 64.9917 55.4671 49.8089 40.4932 48.2295C25.5194 46.6501 23.7159 36.5272 23.7159 36.5272"
    ></path>
    <path
      stroke-linecap="round"
      stroke-width="3"
      stroke-opacity="0.3"
      d="M62.2941 145.984C62.2941 145.984 55.4671 161.167 40.4932 162.746C25.5194 164.326 23.7159 174.449 23.7159 174.449"
    ></path>
  </svg>

Related Examples

scroll to top buton with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

2.7k
strawbery
by salvator

Baraka Salvator

1 year ago

1.9k
Tailwind CSS Button (Wavy Button)
The button uses Tailwind classes for size, background, border, border-radius, shadow, cursor, overflow, and transitions. The wave overlay is absolutely positioned at the bottom of the button, initially off-screen (top-full) and moves to the middle (top-1/2) on hover via the custom .wave class and keyframes. The font-poppins class isn’t a default Tailwind class. You should define it in your Tailwind configuration or replace it with font-sans if you haven't extended fonts.

KULDEEP

1 year ago

1.3k
Previous Next Buttons
Pagination buttons

Alok

3 years ago

15.4k
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.

Coastal UI

1 year ago

2.6k
Join now button
Attractive button for the CTA section

Matej Kovač

2 years ago

2.8k
Card
Card with Likes and download Button

Mrunal Solkar

3 years ago

11.2k
Sign in with GitHub Button

Conan Hilton

4 years ago

17.3k
Buttons in pair

Bunny

3 years ago

12.6k
Buttons with border bottom

Prashant

4 years ago

13.7k
Sign in with facebook button

Conan Hilton

4 years ago

11.6k
Buttons variations

R.P Ketan

3 years ago

10.4k