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

40.9k
Button With Loader
Tailwind Loader

Author:
Md. Tofayel islam

1 year ago

2.6k
Button with loading

Author:
Prem..

3 years ago

19.2k
Contact us form
Contact us form

Author:
Geoffrey Callaghan

1 year ago

5.9k
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

1 week ago

166
Applications Showcase
This is a stylish and interactive application showcase component designed for web use. It features the following elements: Background Styling: The main container has a rounded-rectangle shape (rounded-3xl) with a subtle white base overlaying a high-resolution background image, styled with background-size: 600px for an artistic touch. The image itself dynamically serves as a backdrop, giving the component a layered appearance. Main Icon: A small circular icon, located at the top-right corner, appears with smooth hover effects: Enlarges to double its size (scale-[2]). Rotates (rotate-[410deg]). Moves diagonally upwards-right (translate-x-3, -translate-y-3). These transitions occur over a duration of 1 second (transition duration-1000). Overlay Gradient: A transparent gradient overlay (bg-gradient-to-l) adds a polished depth effect, transitioning from black (from-black/80) to lighter shades. App Icon and Info: Icon: The app icon is a smaller, bordered square image (rounded-2xl) with hover shrink animations (group-hover:scale-95). Text: A bold application title (text-md font-semibold) with hover-animated underline effects that gradually expand from left to right. A short app description styled as secondary text. Call-to-Action Button: Below the card is a subtle, rounded button (rounded-full) encouraging interaction. It features: A hover effect with color inversion (gray to black). A lift effect (hover:-translate-y-1) when hovered. This component is perfect for modern app showcases, offering a dynamic, user-friendly visual experience. It ensures a professional look while engaging users through smooth animations and clear calls to action.

Author:
Banshee

10 months ago

2.4k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

2 months ago

131
Button pair

Author:
Piet Vriend

2 years ago

10.8k
Contact us page

Author:
Freja Jensen

2 years ago

11.8k
Simple buttons for links

Author:
Amit Pachange

2 years ago

10.9k
Buttons variations

Author:
R.P Ketan

2 years ago

9.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components