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

2.6k

Fork Fullscreen

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

<div class="w-full 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_30s_linear_infinite]">
            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_30s_linear_infinite]">
            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_30s_linear_infinite]">
            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