Bolsillo con cremallera
Un bolsillo vaquero con costuras: al pasar el ratón, el tirador de latón recorre la cremallera y deja ver el forro.
Ajustes
Código
<button class="uvq01-zip" type="button"><span class="ln" aria-hidden="true"><b>-30%</b></span><span class="dn up" aria-hidden="true"><i></i></span><span class="dn dw" aria-hidden="true"><i></i></span><span class="tz" aria-hidden="true"></span><span class="pl" aria-hidden="true"></span><span class="t">Ver oferta</span></button>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Botones
Ver todos: BotonesDónde usarlo
Textura vaquera, pespunte naranja y una cremallera de latón hacen que este botón parezca el bolsillo trasero de unos tejanos. Al pasar el ratón o con el foco del teclado, el tirador se desliza, su lengüeta se balancea y la cremallera se abre en V mostrando un forro satinado con un aviso de descuento. Todo es CSS, movido por una propiedad animada. Ideal para tiendas de moda y rebajas.
El color principal es el forro y el secundario la tela vaquera, así que unos tejanos negros con forro rojo o un índigo crudo con mostaza están a un cambio. Deja la etiqueta corta y en mayúsculas y edita el aviso del forro según tu oferta.