Contact Spinner

Contact button spinning

This tailwind example is contributed by $@(\/)(\/)¥, on 28-Mar-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Get in touch, Contact form,loading, loader

Button Contact us Spinner / Loading

$$@(\/)(\/)¥ profile image$

Author $@(\/)(\/)¥

Tailwind v3.4 6.5k 9

Fork Fullscreen

<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">

<div class="w-full flex h-screen bg-gray-900 dark:bg-white">
    <a href="mailto:samuelabera87@gmail.com" id="contact_btn"
        class="w-[10rem] h-[10rem] rounded-full text-[#000e17] grid place-items-center absolute lg:right-[50%] sm:right-[40%] xs:right-[30%] top-[5%] bg-[linear-gradient(-30deg,_#e5a55d,_#ff7b02,_#e5a55d)] cursor-pointer [transition:all_400ms_ease] hover:shadow-2xl hover:shadow-gray-900 hover:-translate-y-[1rem] hover:text-[#000e17]">
        <i class="uil uil-arrow-up-right absolute text-[3.5rem]"></i>
        <p
            class="text-[#000e17] font-semibold w-[10rem] h-[10rem] flex justify-center animate-spinText">
            CONTACT - SEND ME AN EMAIL
        </p>
    </a>

<a href="mailto:samuelabera87@gmail.com" id="contact_btn"
        class="w-[10rem] h-[10rem] rounded-full text-gray-400 grid place-items-center absolute lg:right-[50%] sm:right-[40%] xs:right-[30%] bottom-[35%] cursor-pointer [transition:all_400ms_ease] hover:shadow-2xl hover:shadow-gray-900 hover:-translate-y-[1rem] hover:text-gray-300">
        <i class="uil uil-arrow-up-right absolute text-[3.5rem]"></i>
        <p
            class="text-white dark:text-gray-900 font-semibold w-[10rem] h-[10rem] flex justify-center animate-spinText">
            CONTACT - SEND ME AN EMAIL
        </p>
    </a>

<a href="mailto:samuelabera87@gmail.com" id="contact_btn"
        class="w-[10rem] h-[10rem] rounded-full text-[#000e17] grid place-items-center absolute lg:right-[50%] sm:right-[40%] xs:right-[30%] bottom-[5%] bg-gradient-to-r from-cyan-500 to-blue-500 cursor-pointer [transition:all_400ms_ease] hover:shadow-2xl hover:shadow-gray-900 hover:-translate-y-[1rem] hover:text-[#000e17]">
        <i class="uil uil-arrow-up-right absolute text-[3.5rem]"></i>
        <p
            class="text-[#000e17] font-semibold w-[10rem] h-[10rem] flex justify-center animate-spinText">
            CONTACT - SEND ME AN EMAIL
        </p>
    </a>
</div>

btnContact.forEach(btnText => {
    let text = btnText.querySelector('p');

text.innerHTML = text.innerHTML.split('').map((character, index) => `<span class="absolute origin-[0.3rem_5rem]" style="transform: rotate(${index * 12}deg)">${character}</span>`).join('');
});
</script>

Related Examples

Beautiful animated button
on hover effect

Dika Rahman

2 years ago

5.5k
Get in touch contact form

Kris Showen

3 years ago

42.5k
Button With Loader
Tailwind Loader

Md. Tofayel islam

2 years ago

3.7k
Button with loading

Prem..

4 years ago

20.2k
Contact us form
Contact us form

Geoffrey Callaghan

2 years ago

7.6k
Modern Contact Section with Responsive Grid and Glassmorphic Form
A clean, professional contact section with a dual-column layout featuring contact details and a sleek glassmorphism-inspired form. Fully responsive with Tailwind CSS, supporting both light and dark modes.

Muhammad Umair Arshad

1 year ago

1.2k
Card
Card with Likes and download Button

Mrunal Solkar

3 years ago

11.2k
Buttons with Icon

_Amar_

4 years ago

16.9k
chair
by salvator

Baraka Salvator

1 year ago

1.5k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

6 months ago

633
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

2 years ago

2.6k
shadcn Button
button

Cristian

2 years ago

3.1k