Загрузка...

Кнопка контакта по email в виде таблетки с иконкой. Адаптивная, с эффектом стекломорфизма. Tailwind CSS. Идеальна для шапки, подвала, секций.
<a href="mailto:support@alphabees.de"
class="inline-flex items-center justify-center gap-2 cursor-pointer text-sm font-medium text-gray-900 tracking-tight bg-white/10 backdrop-blur-md border border-white/20 rounded-full pt-3 pr-5 pb-3 pl-5 transition-all duration-300 ease-out shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),0px_6px_6px_-3px_rgba(15,23,42,0.18),0px_12px_12px_-6px_rgba(0,0,0,0.06)] hover:bg-white/10 hover:scale-105 hover:shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_20px_40px_-5px_rgba(15,23,42,0.2),0px_10px_10px_-5px_rgba(0,0,0,0.04)] active:scale-95">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" class=""></path>
<rect x="2" y="4" width="20" height="16" rx="2" class=""></rect>
</svg>
<span class="">support@alphabees.de</span>
</a>