Inputs

Senha que vira borboleta

por @ravox·css

1
#eef3e2
1<label class="w"><svg class="cena" viewBox="0 0 210 92" aria-hidden="true">2  <path d="M20 46 C12 36 16 24 26 20 C30 30 28 40 20 46Z" fill="#8cc84b"/><path d="M21 44 C22 36 24 28 26 22" fill="none" stroke="#5f9136" stroke-width="1.2"/>3  <path d="M46 46 C28 54 26 78 42 90 C60 82 64 60 46 46Z" fill="#6ea23f"/>4  <path d="M46 48 C44 62 44 76 42 88 M45 58 l-8 4 M44 68 l-9 5 M45 62 l7 3" fill="none" stroke="#4d7a2a" stroke-width="1.2" stroke-linecap="round"/>5  <circle cx="58.5" cy="66" r="5" fill="#eef3e2"/><circle cx="57" cy="74.5" r="4" fill="#eef3e2"/><circle cx="55" cy="81" r="3" fill="#eef3e2"/>6  <path d="M-4 48 C40 42 90 46 130 42 S190 36 214 32" fill="none" stroke="#6b4f2e" stroke-width="5" stroke-linecap="round"/>7  <path d="M0 46.5 C40 40.5 90 44.5 130 40.5" fill="none" stroke="#8c6d48" stroke-width="1.3"/>8  <path d="M197 34 C203 24 213 22 217 26 C213 34 205 36 197 34Z" fill="#6ea23f"/>9  <g class="cas">10    <path d="M150 40 V47" stroke="#6b4f2e" stroke-width="1.2"/>11    <path d="M150 46 C160 50 162 64 156 76 C153 82 147 82 144 76 C138 64 140 50 150 46Z" fill="#a7c957"/>12    <path d="M150 46 C160 50 162 64 156 76 C154 80 151 81 150 81 C156 70 156 56 150 46Z" fill="#86ab3e"/>13    <path d="M142.5 57 q7.5 3 16 0 M142.5 66 q7.5 3 15 0" fill="none" stroke="#6a994e" stroke-width="1.3"/>14    <circle cx="146.5" cy="52.5" r="1.2" fill="#f2c14e"/><circle cx="153.5" cy="52.5" r="1.2" fill="#f2c14e"/>15    <path d="M145.5 61.5 q1.6 1.6 3.2 0 M151.3 61.5 q1.6 1.6 3.2 0" fill="none" stroke="#3b5a1e" stroke-width="1.1" stroke-linecap="round"/>16    <text x="162" y="56" font-size="8" font-family="Georgia, serif" font-style="italic" fill="#6a994e">z</text>17  </g>18  <g class="lag">19    <g class="s"><circle cx="106" cy="35" r="6" fill="#6aa336"/><circle cx="105" cy="33.6" r="4.6" fill="#9ed45c"/></g>20    <g class="s"><circle cx="118" cy="33.5" r="7.5" fill="#6aa336"/><circle cx="117" cy="31.8" r="6" fill="#9ed45c"/><circle cx="118" cy="28.5" r="1.6" fill="#f4d35e"/></g>21    <g class="s"><circle cx="130" cy="33" r="7.5" fill="#6aa336"/><circle cx="129" cy="31.3" r="6" fill="#9ed45c"/><circle cx="130" cy="28" r="1.6" fill="#f4d35e"/></g>22    <g class="s"><circle cx="142" cy="32.5" r="7.5" fill="#6aa336"/><circle cx="141" cy="30.8" r="6" fill="#9ed45c"/><circle cx="142" cy="27.5" r="1.6" fill="#f4d35e"/></g>23    <g class="s"><circle cx="154" cy="32" r="7.5" fill="#6aa336"/><circle cx="153" cy="30.3" r="6" fill="#9ed45c"/><circle cx="154" cy="27" r="1.6" fill="#f4d35e"/></g>24    <path d="M116 41 v1.6 M128 40.5 v1.6 M140 40 v1.6 M152 39.5 v1.6" stroke="#3b5a1e" stroke-width="2.4" stroke-linecap="round"/>25    <g class="cabeca">26      <path d="M161 19.5 q-2 -6 -6 -8 M167 18.5 q1 -6 5 -8" fill="none" stroke="#3b5a1e" stroke-width="1.6" stroke-linecap="round"/>27      <circle cx="155" cy="11.5" r="1.8" fill="#f4d35e"/><circle cx="172" cy="10.5" r="1.8" fill="#f4d35e"/>28      <circle cx="167" cy="27" r="9.5" fill="#6aa336"/><circle cx="166" cy="25.6" r="8" fill="#8cc84b"/>29      <circle cx="170" cy="24.5" r="2.3" fill="#1d2a12"/><circle cx="170.8" cy="23.7" r=".8" fill="#fff"/>30      <ellipse cx="171.5" cy="29.5" rx="2.2" ry="1.4" fill="#f29b8f"/>31      <path d="M164.5 29.5 q2.5 2.5 5 0" fill="none" stroke="#1d2a12" stroke-width="1.2" stroke-linecap="round"/>32    </g>33  </g>34  <g class="bor">35    <g class="asas">36      <path d="M150 24 C138 5 117 6 120 20 C121 28 134 30 150 26Z" fill="#f28c28" stroke="#3a2414" stroke-width="1.6" stroke-linejoin="round"/>37      <path d="M150 27 C136 30 126 40 134 46 C140 50 148 40 150 28Z" fill="#f6b24a" stroke="#3a2414" stroke-width="1.6" stroke-linejoin="round"/>38      <path d="M150 24 C162 5 183 6 180 20 C179 28 166 30 150 26Z" fill="#f28c28" stroke="#3a2414" stroke-width="1.6" stroke-linejoin="round"/>39      <path d="M150 27 C164 30 174 40 166 46 C160 50 152 40 150 28Z" fill="#f6b24a" stroke="#3a2414" stroke-width="1.6" stroke-linejoin="round"/>40      <path d="M150 25 L128 13 M150 25 L126 22 M150 25 L172 13 M150 25 L174 22" stroke="#3a241466" stroke-width="1"/>41      <circle cx="124" cy="14" r="1.6" fill="#fff"/><circle cx="128.5" cy="10.5" r="1.2" fill="#fff"/><circle cx="176" cy="14" r="1.6" fill="#fff"/><circle cx="171.5" cy="10.5" r="1.2" fill="#fff"/>42    </g>43    <ellipse cx="150" cy="28" rx="2.4" ry="10" fill="#3a2414"/><circle cx="150" cy="17" r="3" fill="#3a2414"/>44    <path d="M149 15 q-3 -6 -7 -7 M151 15 q3 -6 7 -7" fill="none" stroke="#3a2414" stroke-width="1.2" stroke-linecap="round"/>45  </g>46</svg><span class="rot">Crie uma senha</span><input type="password" minlength="8" required placeholder="mínimo 8 caracteres"><small class="dica"></small></label>
#borboleta#senha#validação#claro#fofo

Mais inputs

Ver todos