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 94 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

Button
Material Button

Akram Khan

2 years ago

2.1k
SCROLL ABAJO
para poner que a llegado al final de la pagina

Raul antonio de la cruz hernandez

1 year ago

1.3k
Fancy leaf like button

_Amar_

4 years ago

12.5k
pasta
by salvator

Baraka Salvator

1 year ago

1.3k
DevPort
modern portifolio by salvator

Baraka Salvator

1 year ago

1.6k
hero modern
hero modern

Omer fils ELENGA

9 months ago

839
button

Raul antonio de la cruz hernandez

11 months ago

1k
Listen on Spotify/Apple Music Button

Patricio Garcia

2 years ago

3.3k
Button wih hover gradient
Works well with the dark theme

Leif99

3 years ago

18.8k
Social buttons
Mono-color Social buttons change colors according to your need

Arya

4 years ago

12.4k
Button with a gradient border using Tailwind CSS

Dipti narayan

3 years ago

13.8k
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