Rounded Email Input

Class Name

Input Color

Input Text Color

Button Color

Border Radius

Input Width

Button Size

Size

Transition Speed

Emaill input with a cool button animation

<div class="rounded-email-container">
    <input class="email-input" placeholder="Email address..." spellcheck="false">
    <button class="email-button">
        <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5034 8.28193L1.28261 0.0659104C0.554325 -0.167879 -0.140854 0.232903 0.0246649 1.06786L2.34193 7.34678L12.2731 8.9833L2.34193 10.6532L0.0246649 16.9321C-0.140854 17.7671 0.554325 18.1679 1.28261 17.9341L17.5034 9.68467C18.1655 9.41748 18.1655 8.58252 17.5034 8.28193Z"></path>
        </svg>
    </button>
</div>

<div class="rounded-email-container">
    <input class="email-input" placeholder="Email address..." spellcheck="false">
    <button class="email-button">
        <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5034 8.28193L1.28261 0.0659104C0.554325 -0.167879 -0.140854 0.232903 0.0246649 1.06786L2.34193 7.34678L12.2731 8.9833L2.34193 10.6532L0.0246649 16.9321C-0.140854 17.7671 0.554325 18.1679 1.28261 17.9341L17.5034 9.68467C18.1655 9.41748 18.1655 8.58252 17.5034 8.28193Z"></path>
        </svg>
    </button>
</div>

Rounded Email Input

csslab

CSSLab Links

Selections