Home
Samuel Abera
Contact Spinner

Contact Spinner

Contact button spinning

This tailwind example is contributed by Samuel Abera, on 28-Mar-2024. Component is made with Tailwind CSS v3. 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

Author Samuel Abera

4.7k

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

Author:
Dika Rahman

1 year ago

4.2k
Get in touch contact form

Author:
Kris Showen

1 year ago

38.4k
Button With Loader
Tailwind Loader

Author:
Md. Tofayel islam

1 year ago

2.2k
Button with loading

Author:
Prem..

2 years ago

17.9k
Contact us form
Contact us form

Author:
Geoffrey Callaghan

1 year ago

5.3k
Responsive contact us section

Author:
Geoffrey Callaghan

1 year ago

6.7k
Floating "Go to Top" Button with Tailwind CSS
🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling. ✔️ Smooth scroll to top ✔️ Clean and modern design ✔️ Responsive and animated effects Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

Author:
Abdul Baset Bappy

2 weeks ago

126
Dashed spinners

Author:
Samuel Dawson

2 years ago

8.8k
🔥 Sleek & Modern Button with Hover Effect – Tailwind CSS
A beautifully designed button using Tailwind CSS, featuring smooth transitions, a bold shadow effect, and a hover animation. Styled with custom colors, rounded edges, and a modern font, this button is perfect for call-to-action (CTA) elements in your website or app. 🚀

Author:
Ahita Bisma Adlula

1 month ago

74
futuristic button

Author:
Crimson

3 months ago

487
Background Gradient Button with Hover Effects
The button designed with a gradient background that transitions smoothly between three colors

Author:
Kavita Joshi

1 year ago

7.2k
Basic contact us section with google map

Author:
Anonymous

1 year ago

11.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components