Button

The simple yet powerful button. ravixUI has multiple types of buttons available out of the box.

Design Hints

Buttons serve as interactive elements that allow users to engage with web pages or websites. While colors can be customized to align with a website's branding, it's important to consider the potential semantic meanings associated with certain hues. For instance, colors like yellow, green, and red can convey additional context about the action a button will perform. Incorporating icons alongside buttons can provide additional information when appropriate. Hover effects can be used to indicate button states, but it's worth noting that this functionality will not translate to touchscreen interfaces. If an action is hard to reverse or irreversible, add confirmation screens or modals to prevent accidental actions.

Accessiblity Hints

Instead of disabling buttons, consider giving feedback using alerts or modals when a user clicks a button with appropriate messages for why the user cannot proceed. Disabling it will make the button unable to receive focus which will remove its accessible nature. When modifying colored elements such as background or text, it's crucial to verify that the color contrast meets accessibility standards. Icons can be used alongside buttons, and it may be tempting to remove text from certain buttons if the icons convey all the information, but you will have to consider screen reader requirements for which there are examples available below. Choose icons which offer additional semantic meaning or familiarity for the user .You can utilize tools or browser extensions that support WCAG guidelines or use dedicated color contrast checkers. Regarding these buttons, the 'type' attribute is set to 'button' for all blocks by default. However, if these buttons are part of a form, you'll need to change the 'type' to 'submit'. ravixUI has predetermined semantic usages for green, red, and yellow colors, but you're free to modify these choices.

Note: All the icons used in this section are available in iconify.design .

Simple Button

Simple buttons for different types of actions. Note that you will need to connect actions to the button using javascript or using a javascript framework.

<div class="flex flex-wrap justify-center gap-6 p-6 sm:gap-12">
  <button
    type="button"
    class="inline-flex rounded-lg bg-indigo-800 px-4 py-3 text-sm font-semibold text-gray-50 shadow-lg shadow-indigo-300/40 outline-offset-4 outline-black hover:bg-indigo-700 focus:outline-4 lg:py-2.5 lg:text-base dark:shadow-none dark:outline-white"
    >Default</button
  >

  <button
    type="button"
    class="inline-flex rounded-lg bg-zinc-900 px-4 py-3 text-sm font-semibold text-gray-50 shadow-lg outline-offset-4 outline-black hover:bg-zinc-700 focus:outline-4 lg:py-2.5 lg:text-base dark:bg-zinc-100 dark:text-zinc-950 dark:shadow-none dark:outline-white dark:hover:bg-zinc-300"
    >High Contrast</button
  >
  <button
    type="button"
    class="inline-flex rounded-lg bg-gray-700 px-4 py-3 text-sm font-semibold text-white shadow-lg outline-offset-4 outline-black hover:bg-gray-600 focus:outline-4 lg:py-2.5 lg:text-base dark:shadow-none dark:outline-white"
    >Neutral
  </button>

  <button
    class="inline-flex rounded-lg bg-green-900 px-4 py-3 text-sm font-semibold text-white shadow-lg outline-offset-4 outline-black hover:bg-green-800 focus:outline-4 lg:py-2.5 lg:text-base dark:shadow-none dark:outline-white"
    >Semantic Green</button
  >
  <button
    class="inline-flex rounded-lg bg-red-800 px-4 py-3 text-sm font-semibold text-white shadow-lg outline-offset-4 outline-black hover:bg-red-700 focus:outline-4 lg:py-2.5 lg:text-base dark:shadow-none dark:outline-white"
    >Semantic Red</button
  >
  <button
    class="inline-flex rounded-lg bg-yellow-400 px-4 py-3 text-sm font-semibold text-black shadow-lg outline-offset-4 outline-black hover:bg-yellow-300 focus:outline-4 lg:py-2.5 lg:text-base dark:shadow-none dark:outline-white"
    >Semantic Yellow</button
  >
  <button
    type="button"
    class="inline-flex rounded-lg border border-gray-400 bg-gray-50 px-4 py-3 text-sm font-semibold text-gray-950 shadow-lg outline-offset-4 outline-black hover:border-gray-500 hover:bg-gray-200 focus:outline-4 lg:py-2.5 lg:text-base dark:border-zinc-700 dark:bg-zinc-950 dark:text-gray-50 dark:shadow-none dark:outline-white dark:hover:border-zinc-500 dark:hover:bg-zinc-900"
    >Border
  </button>
  <button
    type="button"
    class="inline-flex rounded-lg border-indigo-600 px-4 py-3 text-sm font-semibold text-indigo-800 outline-offset-4 outline-black hover:border hover:bg-gray-200 focus:outline-4 lg:py-2.5 lg:text-base dark:border-indigo-400 dark:bg-zinc-950 dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900"
    >Ghost
  </button>
</div>

<div class="flex flex-wrap justify-center gap-6 p-6 sm:gap-12">
  <button
    type="button"
    class="inline-flex rounded-lg bg-indigo-800 px-4 py-3 text-sm font-semibold text-gray-50 shadow-lg shadow-indigo-300/40 outline-offset-4 outline-black hover:bg-indigo-700 focus:outline-4 lg:py-2.5 lg:text-base dark:shadow-none dark:outline-white"
    >Default</button
  >

  <button
    type="button"
    class="inline-flex rounded-lg bg-zinc-900 px-4 py-3 text-sm font-semibold text-gray-50 shadow-lg outline-offset-4 outline-black hover:bg-zinc-700 focus:outline-4 lg:py-2.5 lg:text-base dark:bg-zinc-100 dark:text-zinc-950 dark:shadow-none dark:outline-white dark:hover:bg-zinc-300"
    >High Contrast</button
  >
  <button
    type="button"
    class="inline-flex rounded-lg bg-gray-700 px-4 py-3 text-sm font-semibold text-white shadow-lg outline-offset-4 outline-black hover:bg-gray-600 focus:outline-4 lg:py-2.5 lg:text-base dark:shadow-none dark:outline-white"
    >Neutral
  </button>

  <button
    class="inline-flex rounded-lg bg-green-900 px-4 py-3 text-sm font-semibold text-white shadow-lg outline-offset-4 outline-black hover:bg-green-800 focus:outline-4 lg:py-2.5 lg:text-base dark:shadow-none dark:outline-white"
    >Semantic Green</button
  >
  <button
    class="inline-flex rounded-lg bg-red-800 px-4 py-3 text-sm font-semibold text-white shadow-lg outline-offset-4 outline-black hover:bg-red-700 focus:outline-4 lg:py-2.5 lg:text-base dark:shadow-none dark:outline-white"
    >Semantic Red</button
  >
  <button
    class="inline-flex rounded-lg bg-yellow-400 px-4 py-3 text-sm font-semibold text-black shadow-lg outline-offset-4 outline-black hover:bg-yellow-300 focus:outline-4 lg:py-2.5 lg:text-base dark:shadow-none dark:outline-white"
    >Semantic Yellow</button
  >
  <button
    type="button"
    class="inline-flex rounded-lg border border-gray-400 bg-gray-50 px-4 py-3 text-sm font-semibold text-gray-950 shadow-lg outline-offset-4 outline-black hover:border-gray-500 hover:bg-gray-200 focus:outline-4 lg:py-2.5 lg:text-base dark:border-zinc-700 dark:bg-zinc-950 dark:text-gray-50 dark:shadow-none dark:outline-white dark:hover:border-zinc-500 dark:hover:bg-zinc-900"
    >Border
  </button>
  <button
    type="button"
    class="inline-flex rounded-lg border-indigo-600 px-4 py-3 text-sm font-semibold text-indigo-800 outline-offset-4 outline-black hover:border hover:bg-gray-200 focus:outline-4 lg:py-2.5 lg:text-base dark:border-indigo-400 dark:bg-zinc-950 dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900"
    >Ghost
  </button>
</div>

Note: The default button uses a subtle indigo color for the shadow using the shadow-indigo-300/40 utility.

Simple Button With Icons

The Simple button with icons.

<div class="flex flex-wrap justify-center gap-6 p-6 sm:gap-12">
  <button
    type="button"
    class="inline-flex items-center gap-x-2 rounded-lg bg-indigo-800 px-4 py-3 text-sm font-semibold text-gray-50 shadow-lg shadow-indigo-300/40 outline-offset-4 outline-black hover:bg-indigo-700 focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
  >
    <span>Send Message</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="m4.01 6.03l7.51 3.22l-7.52-1zm7.5 8.72L4 17.97v-2.22zM2.01 3L2 10l15 2l-15 2l.01 7L23 12z"
      ></path>
    </svg>
  </button>
  <button
    type="button"
    class="inline-flex items-center gap-x-2 rounded-lg bg-zinc-900 px-4 py-3 text-sm font-semibold text-gray-50 shadow-lg outline-offset-4 outline-black hover:bg-zinc-800 focus:outline-4 lg:text-base dark:bg-zinc-200 dark:text-zinc-950 dark:shadow-none dark:outline-white dark:hover:bg-zinc-50"
    ><span>Send Message</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="m4.01 6.03l7.51 3.22l-7.52-1zm7.5 8.72L4 17.97v-2.22zM2.01 3L2 10l15 2l-15 2l.01 7L23 12z"
      ></path>
    </svg></button
  >
  <button
    type="button"
    class="inline-flex items-center gap-x-2 rounded-lg bg-gray-700 px-4 py-3 text-sm font-semibold text-white shadow-lg outline-offset-4 outline-black hover:bg-gray-600 focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
    ><span>Send Message</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="m4.01 6.03l7.51 3.22l-7.52-1zm7.5 8.72L4 17.97v-2.22zM2.01 3L2 10l15 2l-15 2l.01 7L23 12z"
      ></path>
    </svg>
  </button>

  <button
    class="inline-flex items-center gap-x-2 rounded-lg bg-green-900 px-4 py-3 text-sm font-semibold text-white shadow-lg outline-offset-4 outline-black hover:bg-green-800 focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <path fill="currentColor" d="M9 16.2L4.8 12l-1.4 1.4L9 19L21 7l-1.4-1.4z"
      ></path>
    </svg>
    <span>Confirm</span></button
  >
  <button
    class="inline-flex items-center gap-x-2 rounded-lg bg-red-800 px-4 py-3 text-sm font-semibold text-white shadow-lg outline-offset-4 outline-black hover:bg-red-700 focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m3.59-13L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41z"
      ></path>
    </svg>
    <span>Cancel</span></button
  >
  <button
    class="inline-flex items-center gap-x-2 rounded-lg bg-yellow-400 px-4 py-3 text-sm font-semibold text-black shadow-lg outline-offset-4 outline-black hover:bg-yellow-300 focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4zM18 14H6v-2h12zm0-3H6V9h12zm0-3H6V6h12z"
      ></path>
    </svg>
    <span>Suggest Changes</span></button
  >
</div>

<div class="flex flex-wrap justify-center gap-6 p-6 sm:gap-12">
  <button
    type="button"
    class="inline-flex items-center gap-x-2 rounded-lg bg-indigo-800 px-4 py-3 text-sm font-semibold text-gray-50 shadow-lg shadow-indigo-300/40 outline-offset-4 outline-black hover:bg-indigo-700 focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
  >
    <span>Send Message</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="m4.01 6.03l7.51 3.22l-7.52-1zm7.5 8.72L4 17.97v-2.22zM2.01 3L2 10l15 2l-15 2l.01 7L23 12z"
      ></path>
    </svg>
  </button>
  <button
    type="button"
    class="inline-flex items-center gap-x-2 rounded-lg bg-zinc-900 px-4 py-3 text-sm font-semibold text-gray-50 shadow-lg outline-offset-4 outline-black hover:bg-zinc-800 focus:outline-4 lg:text-base dark:bg-zinc-200 dark:text-zinc-950 dark:shadow-none dark:outline-white dark:hover:bg-zinc-50"
    ><span>Send Message</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="m4.01 6.03l7.51 3.22l-7.52-1zm7.5 8.72L4 17.97v-2.22zM2.01 3L2 10l15 2l-15 2l.01 7L23 12z"
      ></path>
    </svg></button
  >
  <button
    type="button"
    class="inline-flex items-center gap-x-2 rounded-lg bg-gray-700 px-4 py-3 text-sm font-semibold text-white shadow-lg outline-offset-4 outline-black hover:bg-gray-600 focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
    ><span>Send Message</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="m4.01 6.03l7.51 3.22l-7.52-1zm7.5 8.72L4 17.97v-2.22zM2.01 3L2 10l15 2l-15 2l.01 7L23 12z"
      ></path>
    </svg>
  </button>

  <button
    class="inline-flex items-center gap-x-2 rounded-lg bg-green-900 px-4 py-3 text-sm font-semibold text-white shadow-lg outline-offset-4 outline-black hover:bg-green-800 focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <path fill="currentColor" d="M9 16.2L4.8 12l-1.4 1.4L9 19L21 7l-1.4-1.4z"
      ></path>
    </svg>
    <span>Confirm</span></button
  >
  <button
    class="inline-flex items-center gap-x-2 rounded-lg bg-red-800 px-4 py-3 text-sm font-semibold text-white shadow-lg outline-offset-4 outline-black hover:bg-red-700 focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m3.59-13L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41z"
      ></path>
    </svg>
    <span>Cancel</span></button
  >
  <button
    class="inline-flex items-center gap-x-2 rounded-lg bg-yellow-400 px-4 py-3 text-sm font-semibold text-black shadow-lg outline-offset-4 outline-black hover:bg-yellow-300 focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4zM18 14H6v-2h12zm0-3H6V9h12zm0-3H6V6h12z"
      ></path>
    </svg>
    <span>Suggest Changes</span></button
  >
</div>

Note: aria-hidden=true is added to the svg icons as an attribute to hide it from screen readers to prevent duplication for screen readers since we have button labels explaining the button’s action.

Link Button

This is a tailwindCSS wrapper on the <a> tag to make it look like a button. Useful for internal navigation to different parts of a page and also between different pages in your project.

Get Started Read More Next Page

<div class="flex flex-wrap justify-center gap-6 p-6 sm:gap-12">
  <a
    href="#"
    class="inline-flex items-center gap-x-2 rounded-lg bg-indigo-800 px-4 py-2.5 text-sm font-semibold text-gray-50 shadow-lg outline-offset-4 outline-black hover:bg-indigo-700 focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
  >
    <span>Get Started</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <path fill="currentColor" d="M16.01 11H4v2h12.01v3L20 12l-3.99-4z"></path>
    </svg>
  </a>
  <a
    href="#"
    class="inline-flex items-center gap-x-2 rounded-lg bg-zinc-900 px-4 py-2.5 text-sm font-semibold text-gray-50 shadow-lg outline-offset-4 outline-black hover:bg-zinc-800 focus:outline-4 lg:text-base dark:bg-zinc-200 dark:text-zinc-950 dark:shadow-none dark:outline-white dark:hover:bg-zinc-50"
  >
    <span>Read More</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z"></path>
    </svg>
  </a>
  <a
    href="#"
    class="inline-flex items-center gap-x-2 rounded-lg bg-gray-700 px-4 py-2.5 text-sm font-semibold text-white shadow-lg outline-offset-4 outline-black hover:bg-gray-600 focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
    ><span>Next Page</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z"></path>
    </svg>
  </a>
</div>

<div class="flex flex-wrap justify-center gap-6 p-6 sm:gap-12">
  <a
    href="#"
    class="inline-flex items-center gap-x-2 rounded-lg bg-indigo-800 px-4 py-3 text-sm font-semibold text-gray-50 shadow-lg outline-offset-4 outline-black hover:bg-indigo-700 focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
  >
    <span>Get Started</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <path fill="currentColor" d="M16.01 11H4v2h12.01v3L20 12l-3.99-4z"></path>
    </svg>
  </a>
  <a
    href="#"
    class="inline-flex items-center gap-x-2 rounded-lg bg-zinc-900 px-4 py-3 text-sm font-semibold text-gray-50 shadow-lg outline-offset-4 outline-black hover:bg-zinc-800 focus:outline-4 lg:text-base dark:bg-zinc-200 dark:text-zinc-950 dark:shadow-none dark:outline-white dark:hover:bg-zinc-50"
  >
    <span>Read More</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z"></path>
    </svg>
  </a>
  <a
    href="#"
    class="inline-flex items-center gap-x-2 rounded-lg bg-gray-700 px-4 py-3 text-sm font-semibold text-white shadow-lg outline-offset-4 outline-black hover:bg-gray-600 focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
    ><span>Next Page</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z"></path>
    </svg>
  </a>
</div>

Design Hints

Using icons is recommended for navigational buttons. For external links leading to other websites, it is preferable to employ inline anchor tags accompanied by underlined text. If you choose to adopt a button-like appearance for anchor tags directing users to external sites, ensure that there are clear indicators on the button that clicking it will redirect the user away from your website.

Accessible Icon Only Button

The accessible icon only button. Useful when dealing with limited space on a webpage.

<div class="flex flex-col justify-center gap-6 overflow-auto p-6">
  <div class="flex w-full flex-wrap justify-center gap-4 sm:gap-12">
    <button
      aria-label="Add to favorites"
      title="Add to favorites"
      type="button"
      class="rounded-lg text-xl font-semibold text-rose-600 outline-offset-2 outline-black hover:text-rose-500 focus:outline-2 dark:outline-white"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="48"
        height="48"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"
        ></path>
      </svg>
    </button>

    <button
      aria-label="Settings"
      title="Settings"
      type="button"
      class="rounded-lg text-xl font-semibold text-zinc-950 outline-offset-2 outline-black hover:text-zinc-700 focus:outline-2 dark:text-zinc-300 dark:outline-white dark:hover:text-zinc-50"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="48"
        height="48"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M19.14 12.94c.04-.3.06-.61.06-.94c0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6s3.6 1.62 3.6 3.6s-1.62 3.6-3.6 3.6"
        ></path>
      </svg>
    </button>
    <button
      aria-label="Share this post"
      title="Share this post"
      type="button"
      class="rounded-lg text-xl font-semibold text-blue-600 outline-offset-2 outline-black hover:text-blue-500 focus:outline-2 dark:outline-white"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="48"
        height="48"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81c1.66 0 3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65c0 1.61 1.31 2.92 2.92 2.92c1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92"
        ></path>
      </svg>
    </button>
    <button
      aria-label="Restore Defaults"
      title="Restore Defaults"
      type="button"
      class="rounded-lg text-xl font-semibold text-zinc-950 outline-offset-2 outline-black hover:text-zinc-700 focus:outline-2 dark:text-zinc-300 dark:outline-white dark:hover:text-zinc-50"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="48"
        height="48"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M13 3a9 9 0 0 0-9 9H1l3.89 3.89l.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7s-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18m-1 5v5l4.28 2.54l.72-1.21l-3.5-2.08V8z"
        ></path>
      </svg>
    </button>
    <button
      aria-label="Save this post"
      title="Save this post"
      type="button"
      class="rounded-lg border border-indigo-500 bg-gray-50 p-3 text-xl font-semibold text-indigo-700 outline-offset-4 outline-black hover:border-indigo-600 hover:bg-gray-200 hover:text-indigo-500 focus:outline-4 dark:bg-zinc-950 dark:text-indigo-500 dark:outline-white dark:hover:border-indigo-400 dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7zm-6 .67l2.59-2.58L17 11.5l-5 5l-5-5l1.41-1.41L11 12.67V3h2z"
        ></path>
      </svg>
    </button>
  </div>
  <div class="flex w-full flex-wrap justify-center gap-4 sm:gap-12">
    <button
      aria-label="Add to favorites"
      title="Add to favorites"
      type="button"
      class="rounded-lg p-1 text-xl font-semibold text-rose-600 outline-offset-2 outline-black hover:text-rose-500 focus:outline-2 dark:outline-white"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="38"
        height="38"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"
        ></path>
      </svg>
    </button>

    <button
      aria-label="Settings"
      title="Settings"
      type="button"
      class="rounded-lg p-1 text-xl font-semibold text-zinc-950 outline-offset-2 outline-black hover:text-zinc-700 focus:outline-2 dark:text-zinc-300 dark:outline-white dark:hover:text-zinc-50"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="38"
        height="38"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M19.14 12.94c.04-.3.06-.61.06-.94c0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6s3.6 1.62 3.6 3.6s-1.62 3.6-3.6 3.6"
        ></path>
      </svg>
    </button>
    <button
      aria-label="Share this post"
      title="Share this post"
      type="button"
      class="rounded-lg p-1 text-xl font-semibold text-blue-600 outline-offset-2 outline-black hover:text-blue-500 focus:outline-2 dark:outline-white"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="38"
        height="38"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81c1.66 0 3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65c0 1.61 1.31 2.92 2.92 2.92c1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92"
        ></path>
      </svg>
    </button>
    <button
      aria-label="Restore Defaults"
      title="Restore Defaults"
      type="button"
      class="rounded-lg p-1 text-xl font-semibold text-zinc-950 outline-offset-2 outline-black hover:text-zinc-700 focus:outline-2 dark:text-zinc-300 dark:outline-white dark:hover:text-zinc-50"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="38"
        height="38"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M13 3a9 9 0 0 0-9 9H1l3.89 3.89l.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7s-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18m-1 5v5l4.28 2.54l.72-1.21l-3.5-2.08V8z"
        ></path>
      </svg>
    </button>
    <button
      aria-label="Save this post"
      title="Save this post"
      type="button"
      class="rounded-lg border border-indigo-500 bg-gray-50 p-2.5 text-xl font-semibold text-indigo-700 outline-offset-4 outline-black hover:border-indigo-600 hover:bg-gray-200 hover:text-indigo-500 focus:outline-4 dark:bg-zinc-950 dark:text-indigo-500 dark:outline-white dark:hover:border-indigo-400 dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7zm-6 .67l2.59-2.58L17 11.5l-5 5l-5-5l1.41-1.41L11 12.67V3h2z"
        ></path>
      </svg>
    </button>
  </div>
</div>

<div class="flex flex-col justify-center gap-6 overflow-auto p-6">
  <div class="flex w-full flex-wrap justify-center gap-4 sm:gap-12">
    <button
      aria-label="Add to favorites"
      title="Add to favorites"
      type="button"
      class="rounded-lg text-xl font-semibold text-rose-600 outline-offset-2 outline-black hover:text-rose-500 focus:outline-2 dark:outline-white"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="48"
        height="48"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"
        ></path>
      </svg>
    </button>

    <button
      aria-label="Settings"
      title="Settings"
      type="button"
      class="rounded-lg text-xl font-semibold text-zinc-950 outline-offset-2 outline-black hover:text-zinc-700 focus:outline-2 dark:text-zinc-300 dark:outline-white dark:hover:text-zinc-50"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="48"
        height="48"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M19.14 12.94c.04-.3.06-.61.06-.94c0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6s3.6 1.62 3.6 3.6s-1.62 3.6-3.6 3.6"
        ></path>
      </svg>
    </button>
    <button
      aria-label="Share this post"
      title="Share this post"
      type="button"
      class="rounded-lg text-xl font-semibold text-blue-600 outline-offset-2 outline-black hover:text-blue-500 focus:outline-2 dark:outline-white"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="48"
        height="48"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81c1.66 0 3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65c0 1.61 1.31 2.92 2.92 2.92c1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92"
        ></path>
      </svg>
    </button>
    <button
      aria-label="Restore Defaults"
      title="Restore Defaults"
      type="button"
      class="rounded-lg text-xl font-semibold text-zinc-950 outline-offset-2 outline-black hover:text-zinc-700 focus:outline-2 dark:text-zinc-300 dark:outline-white dark:hover:text-zinc-50"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="48"
        height="48"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M13 3a9 9 0 0 0-9 9H1l3.89 3.89l.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7s-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18m-1 5v5l4.28 2.54l.72-1.21l-3.5-2.08V8z"
        ></path>
      </svg>
    </button>
    <button
      aria-label="Save this post"
      title="Save this post"
      type="button"
      class="rounded-lg border border-indigo-500 bg-gray-50 p-3 text-xl font-semibold text-indigo-700 outline-offset-4 outline-black hover:border-indigo-600 hover:bg-gray-200 hover:text-indigo-500 focus:outline-4 dark:bg-zinc-950 dark:text-indigo-500 dark:outline-white dark:hover:border-indigo-400 dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7zm-6 .67l2.59-2.58L17 11.5l-5 5l-5-5l1.41-1.41L11 12.67V3h2z"
        ></path>
      </svg>
    </button>
  </div>
  <div class="flex w-full flex-wrap justify-center gap-4 sm:gap-12">
    <button
      aria-label="Add to favorites"
      title="Add to favorites"
      type="button"
      class="rounded-lg p-1 text-xl font-semibold text-rose-600 outline-offset-2 outline-black hover:text-rose-500 focus:outline-2 dark:outline-white"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="38"
        height="38"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"
        ></path>
      </svg>
    </button>

    <button
      aria-label="Settings"
      title="Settings"
      type="button"
      class="rounded-lg p-1 text-xl font-semibold text-zinc-950 outline-offset-2 outline-black hover:text-zinc-700 focus:outline-2 dark:text-zinc-300 dark:outline-white dark:hover:text-zinc-50"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="38"
        height="38"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M19.14 12.94c.04-.3.06-.61.06-.94c0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6s3.6 1.62 3.6 3.6s-1.62 3.6-3.6 3.6"
        ></path>
      </svg>
    </button>
    <button
      aria-label="Share this post"
      title="Share this post"
      type="button"
      class="rounded-lg p-1 text-xl font-semibold text-blue-600 outline-offset-2 outline-black hover:text-blue-500 focus:outline-2 dark:outline-white"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="38"
        height="38"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81c1.66 0 3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65c0 1.61 1.31 2.92 2.92 2.92c1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92"
        ></path>
      </svg>
    </button>
    <button
      aria-label="Restore Defaults"
      title="Restore Defaults"
      type="button"
      class="rounded-lg p-1 text-xl font-semibold text-zinc-950 outline-offset-2 outline-black hover:text-zinc-700 focus:outline-2 dark:text-zinc-300 dark:outline-white dark:hover:text-zinc-50"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="38"
        height="38"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M13 3a9 9 0 0 0-9 9H1l3.89 3.89l.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7s-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18m-1 5v5l4.28 2.54l.72-1.21l-3.5-2.08V8z"
        ></path>
      </svg>
    </button>
    <button
      aria-label="Save this post"
      title="Save this post"
      type="button"
      class="rounded-lg border border-indigo-500 bg-gray-50 p-2.5 text-xl font-semibold text-indigo-700 outline-offset-4 outline-black hover:border-indigo-600 hover:bg-gray-200 hover:text-indigo-500 focus:outline-4 dark:bg-zinc-950 dark:text-indigo-500 dark:outline-white dark:hover:border-indigo-400 dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7zm-6 .67l2.59-2.58L17 11.5l-5 5l-5-5l1.41-1.41L11 12.67V3h2z"
        ></path>
      </svg>
    </button>
  </div>
</div>

Note: We use title="" attribute to create a tooltip to give additional information to the user when they hover over the button and aria-label="" attribute for screenreaders. Most screenreaders will only callout aria-label attribute or the title attribute . aria-hidden=true is added to the svg icons as an attribute to hide it from screen readers to prevent duplicate callouts.

Design Hints

For actions that are widely recognized, such as settings, favorites, or sharing, it is recommended to utilize familiar icons. However, in scenarios where an icon-only button triggers an uncommon action on touchscreen devices, where tooltips are not functional, it may be necessary to provide a tutorial for first-time users and a dedicated help section for returning users. Additionally, adding a confirmation modal for such buttons can help prevent unintentional actions by users. The Restore Defaults button above serves as a good example of an action that, while potentially familiar to users, warrants additional confirmation before execution.

Stylized Buttons

These buttons are stylized and can be used to add a bit of flair to your page.

<div class="flex flex-wrap justify-center gap-6 p-6 sm:gap-12">
  <button
    type="button"
    class="rounded-lg bg-gradient-to-r from-indigo-600 to-blue-900 px-4 py-3 text-sm font-semibold text-gray-50 shadow-xl outline-offset-4 outline-black hover:bg-gradient-to-l focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
    >Button</button
  >
  <button
    type="button"
    class="rounded-lg bg-gradient-to-r from-red-500 to-orange-500 px-4 py-3 text-sm font-semibold text-gray-50 shadow-xl outline-offset-4 outline-black hover:bg-gradient-to-l focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
    >Button</button
  >
  <button
    type="button"
    class="rounded-lg bg-gradient-to-r from-teal-400 to-yellow-200 px-4 py-3 text-sm font-semibold text-zinc-950 shadow-xl outline-offset-4 outline-black hover:bg-gradient-to-b focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
    >Button</button
  >
  <button
    type="button"
    class="rounded-lg bg-gradient-to-tr from-zinc-800 via-cyan-600 to-cyan-900 px-4 py-3 text-sm font-semibold text-gray-50 shadow-xl outline-offset-4 outline-black hover:bg-gradient-to-bl focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
    >Button</button
  >
  <button
    type="button"
    class="rounded-lg bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 px-4 py-3 text-sm font-semibold text-gray-50 shadow-xl outline-offset-4 outline-black hover:bg-gradient-to-t focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
    >Button</button
  >
  <button
    type="button"
    class="rounded-lg bg-gradient-to-r from-slate-500 to-slate-800 px-4 py-3 text-sm font-semibold text-gray-50 shadow-xl outline-offset-4 outline-black hover:bg-gradient-to-l focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
    >Metallic</button
  >

  <button
    type="button"
    class="rounded-lg border border-indigo-600 px-4 py-3 text-sm font-semibold text-zinc-950 shadow-[1px_1px_rgba(67,56,202,_0.3),_4px_4px_rgba(79,70,229,_0.3),_6px_6px_rgba(99,102,241,_0.3)] outline-offset-4 outline-black hover:bg-indigo-200/40 focus:outline-4 lg:text-base dark:border-indigo-800 dark:text-zinc-50 dark:outline-white dark:hover:bg-indigo-950/60"
  >
    Shadow Effect
  </button>
</div>

<div class="flex flex-wrap justify-center gap-6 p-6 sm:gap-12">
  <button
    type="button"
    class="rounded-lg bg-gradient-to-r from-indigo-600 to-blue-900 px-4 py-3 text-sm font-semibold text-gray-50 shadow-xl outline-offset-4 outline-black hover:bg-gradient-to-l focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
    >Button</button
  >
  <button
    type="button"
    class="rounded-lg bg-gradient-to-r from-red-500 to-orange-500 px-4 py-3 text-sm font-semibold text-gray-50 shadow-xl outline-offset-4 outline-black hover:bg-gradient-to-l focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
    >Button</button
  >
  <button
    type="button"
    class="rounded-lg bg-gradient-to-r from-teal-400 to-yellow-200 px-4 py-3 text-sm font-semibold text-zinc-950 shadow-xl outline-offset-4 outline-black hover:bg-gradient-to-b focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
    >Button</button
  >
  <button
    type="button"
    class="rounded-lg bg-gradient-to-tr from-zinc-800 via-cyan-600 to-cyan-900 px-4 py-3 text-sm font-semibold text-gray-50 shadow-xl outline-offset-4 outline-black hover:bg-gradient-to-bl focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
    >Button</button
  >
  <button
    type="button"
    class="rounded-lg bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 px-4 py-3 text-sm font-semibold text-gray-50 shadow-xl outline-offset-4 outline-black hover:bg-gradient-to-t focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
    >Button</button
  >
  <button
    type="button"
    class="rounded-lg bg-gradient-to-r from-slate-500 to-slate-800 px-4 py-3 text-sm font-semibold text-gray-50 shadow-xl outline-offset-4 outline-black hover:bg-gradient-to-l focus:outline-4 lg:text-base dark:shadow-none dark:outline-white"
    >Metallic</button
  >

  <button
    type="button"
    class="rounded-lg border border-indigo-600 px-4 py-3 text-sm font-semibold text-zinc-950 shadow-[1px_1px_rgba(67,56,202,_0.3),_4px_4px_rgba(79,70,229,_0.3),_6px_6px_rgba(99,102,241,_0.3)] outline-offset-4 outline-black hover:bg-indigo-200/40 focus:outline-4 lg:text-base dark:border-indigo-800 dark:text-zinc-50 dark:outline-white dark:hover:bg-indigo-950/60"
  >
    Shadow Effect
  </button>
</div>

Note: The gradients are easy to modify using tailwind. For the second row buttons, shadow ( box shadow ) is used with arbitrary value to produce the effects. To easily visualize and customize the gradients you can use the Tailwind Gradient Generator .

Design Hints

While these buttons are accessible, use them sparingly since it can distract the user away from the content. The perfect use case would be a one off button like a CTA.

Accessibility Testing Status

Component	NVDA	Windows Narrator	WAVE	Axe	IBM Equal Access
Simple Button	Yes	Yes	Yes	Yes	Yes
Simple Button With Icons	Yes	Yes	Yes	Yes	Yes
Link Button	Yes	Yes	Yes	Yes	Yes
Accessible Icon Only Button	Yes	Yes	Yes	Yes	Yes
Stylized Button	Yes	Yes	Yes	Yes	Yes

ravixUI uses the semantic <button> element for all non link buttons and <a> element for link buttons. The size of the buttons meet the minimum target size for interactive elements as defined by the WCAG 2.1 specification. . The minimum target size for all the buttons in this context, i.e., with the fonts used, the outer containers of the buttons etc. is 44 x 44 px.

While the 44px X 44px target size is important, another important factor to note is that there should be ample space between clickable areas of buttons placed next to each other.