Follow Twitter Button
<button class="flex overflow-hidden items-center text-sm font-medium bg-blue-500 text-white shadow hover:bg-blue-600 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-blue-500 hover:ring-offset-2">
<span class="absolute right-0 -mt-12 h-32 w-8 translate-x-12 rotate-12 bg-white opacity-20 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="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"></path>
</svg>
<span class="ml-1 text-white">Follow on Twitter</span>
</div>
<div class="ml-2 flex items-center gap-1 text-sm">
<span class="inline-block tabular-nums tracking-wider font-display font-medium text-white">2.4k</span>
</div>
</button>About Follow Twitter Button
Follow Twitter 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
- Share rows, sign in screens and anywhere a platform needs to be recognised instantly, where a social and twitter button fits the surrounding design
- Repeated use across a page, since there is no animation to become tiring when several appear together
- Palettes built around blue and white, where this button can be dropped in without retheming
How it works
Follow Twitter 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
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
Everything this component uses has been supported across browsers for years, so no fallback is needed.
Related components
Frequently asked questions
Follow Twitter Button
<button class="flex overflow-hidden items-center text-sm font-medium bg-blue-500 text-white shadow hover:bg-blue-600 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-blue-500 hover:ring-offset-2">
<span class="absolute right-0 -mt-12 h-32 w-8 translate-x-12 rotate-12 bg-white opacity-20 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="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"></path>
</svg>
<span class="ml-1 text-white">Follow on Twitter</span>
</div>
<div class="ml-2 flex items-center gap-1 text-sm">
<span class="inline-block tabular-nums tracking-wider font-display font-medium text-white">2.4k</span>
</div>
</button>What is inside Follow Twitter Button
Follow Twitter Button is a button supplied as HTML and Tailwind, with the styling carried by utility classes rather than a stylesheet.
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.