Usefuldevtools.com
☕

Join Discord Button

0 viewsmedium
Background:
1
2
3
4
5
6
7
8
9
10
11
12
13
<button class="flex overflow-hidden items-center text-sm font-medium bg-indigo-600 text-white shadow hover:bg-indigo-700 h-9 px-4 py-2 max-w-52 whitespace-pre group relative w-full justify-center gap-2 rounded-md transition-all duration-300 ease-out hover:ring-2 hover:ring-indigo-600 hover:ring-offset-2">
  <span class="absolute right-0 -mt-12 h-32 w-8 translate-x-12 rotate-12 bg-white opacity-15 transition-all duration-1000 ease-out group-hover:-translate-x-40"></span>
  <div class="flex items-center">
    <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
      <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419-.0190 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9460 2.4189-2.1568 2.4189Z"></path>
    </svg>
    <span class="ml-1 text-white">Join Discord</span>
  </div>
  <div class="ml-2 flex items-center gap-1 text-sm">
    <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
    <span class="inline-block tabular-nums tracking-wider font-display font-medium text-white">Online</span>
  </div>
</button>
Was this helpful?

What is inside Join Discord Button

Join Discord Button is a button supplied as HTML and Tailwind, with the styling carried by utility classes rather than a stylesheet.

0
CSS properties
0
Selectors
0
Lines of CSS
2
Formats

Accessibility check

  • Built on a native <button> element, so keyboard focus and screen reader semantics work without extra attributes.

These notes are generated by reading this component's own source, so they describe what it actually does rather than what a template says. Copy the code above in HTML, Tailwind and adapt it freely.

About Join Discord Button

Join Discord Button is a button built from plain CSS, with no animation or generated content involved. Every format shown on this page is the same component, so you can take HTML and Tailwind depending on how your project is set up. Nothing is minified and nothing depends on a framework.

When to use

How it works

Join Discord Button carries its styling in utility classes rather than a stylesheet, so the markup and the appearance live in the same place. Copy the classes and the structure together, since neither works without the other.

Accessibility

Keyboard navigation
Supported
Screen reader
Friendly
ARIA
Native element semantics, no extra attributes needed

Built on a native <button> element, so keyboard focus and screen reader semantics work without extra attributes. Nothing in the source contradicts keyboard or screen reader use.

Browser support

Chrome
26+
Firefox
16+
Safari
9+
Edge
12+

Everything this component uses has been supported across browsers for years, so no fallback is needed.

Frequently asked questions