Home
$@(\/)(\/)¥
Contact Spinner

Contact Spinner

Contact button spinning

This tailwind example is contributed by $@(\/)(\/)¥, 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

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

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

5.4k

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.9k
Get in touch contact form

Author:
Kris Showen

2 years ago

41k
Button With Loader
Tailwind Loader

Author:
Md. Tofayel islam

1 year ago

2.7k
Button with loading

Author:
Prem..

3 years ago

19.2k
Contact us form
Contact us form

Author:
Geoffrey Callaghan

1 year ago

6k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

3 weeks ago

423
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Author:
Abhiraj

10 months ago

1.9k
Ovel shaped loading spinner

Author:
Freja Jensen

2 years ago

17.4k
Buttons!

Author:
Crimson

10 months ago

1.5k
Your Creative Login Page
"Animated Image Login UI" "Tailwind Image Login with Animated Background" "Innovative User Login Experience" "Creative Bubble Background Login" "Login with Personality — Featuring Your Image" "Acode Master Animated Login" ✅ (customized for you)

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

589
Buttons examples

Author:
Manuela Bianka

2 years ago

12.4k
Responsive Contact Information and Inquiry Form Component
This component is a fully responsive and reusable section designed for websites that need to display contact information alongside a user inquiry form. It is built with Tailwind CSS for easy customization and integration into any projec

Author:
Vikas Kushwah

7 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components