3d
1. Color
Los colores originales del icono se mantienen hasta que elijas un color nuevo.
2. Fondo del lienzo y transformaciones
3. Ajustes de animación vectorial en vivo
Incluido en la exportación SVG
Icono SVG de Hover 3D Button
La fuente, el autor y la licencia estan en la vista previa y en el detalle del icono. Hover 3D Button - Gratis para uso comercial y personal. Sin Registro | 100% en tu Navegador
Descargas instantaneas vectoriales y de alta resolución
Los colores originales del icono se mantienen hasta que elijas un color nuevo.
Paquete con créditos
hover-3d-button.svg (4.046 B)
Copia rápida para desarrolladores y frameworks de interfaz
Salida de código en vivo
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="36" height="36" role="img" aria-label="Hover 3D Button icon"><title>Hover 3D Button - Mouse icon</title><desc>Free Hover 3D Button vector icon from the Mouse open-source icon library; 3d style, MIT licence, viewBox 0 0 48 48, 3735 bytes.</desc>
<defs>
<linearGradient id="nx3619_hb-f" x1="0.1" y1="0" x2="0.9" y2="1"><stop offset="0" stop-color="#9AF0FF"/><stop offset="0.5" stop-color="#1FB8E8"/><stop offset="1" stop-color="#0A78A8"/></linearGradient>
<linearGradient id="nx3619_hb-gl" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFFFFF" stop-opacity="0.85"/><stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/></linearGradient>
<radialGradient id="nx3619_hb-sh"><stop offset="0" stop-color="#0B1220" stop-opacity="0.38"/><stop offset="1" stop-color="#0B1220" stop-opacity="0"/></radialGradient>
<linearGradient id="nx3619_hb-ab" x1="0" y1="0" x2="0.6" y2="1"><stop offset="0" stop-color="#FF7F1F"/><stop offset="1" stop-color="#C94A00"/></linearGradient>
<linearGradient id="nx3619_hb-aa" x1="0.1" y1="0" x2="0.9" y2="1"><stop offset="0" stop-color="#FFC088"/><stop offset="0.5" stop-color="#FF7F1F"/><stop offset="1" stop-color="#FF7F1F"/></linearGradient>
<clipPath id="nx3619_hb-ac"><path d="M30.32 21.57Q30 20 31.45 20.67L41.64 25.37Q43 26 41.59 26.5L36.94 28.16Q36 28.5 35.72 29.46L33.95 35.47Q33.5 37 33.18 35.43Z"/></clipPath>
</defs>
<g transform="translate(2 0)">
<ellipse cx="22" cy="42.6" rx="18" ry="2.2" fill="url(#nx3619_hb-sh)"/>
<rect x="0.8" y="5.8" width="38.4" height="24.4" rx="12.2" fill="none" stroke="#1FB8E8" stroke-opacity="0.45" stroke-width="1.6"/>
<rect x="3" y="8" width="34" height="20" rx="10" fill="#07587D" transform="translate(0 4)"/>
<rect x="3" y="8" width="34" height="20" rx="10" fill="#07587D" transform="translate(0 3)"/>
<rect x="3" y="8" width="34" height="20" rx="10" fill="#07587D" transform="translate(0 2)"/>
<rect x="3" y="8" width="34" height="20" rx="10" fill="#07587D" transform="translate(0 1)"/>
<rect x="3" y="8" width="34" height="20" rx="10" fill="url(#nx3619_hb-f)"/>
<rect x="5.5" y="9.4" width="29" height="8.4" rx="4.2" fill="url(#nx3619_hb-gl)" fill-opacity="0.4"/>
<rect x="9" y="17" width="16" height="4" rx="2" fill="#07587D" fill-opacity="0.4"/>
<rect x="9" y="16" width="16" height="4" rx="2" fill="#FFFFFF" fill-opacity="0.95"/>
<path d="M5 17 Q5 10.6 11 10.2 H29" fill="none" stroke="#FFFFFF" stroke-opacity="0.55" stroke-width="1.2" stroke-linecap="round"/>
<path d="M30.32 21.57Q30 20 31.45 20.67L41.64 25.37Q43 26 41.59 26.5L36.94 28.16Q36 28.5 35.72 29.46L33.95 35.47Q33.5 37 33.18 35.43Z" fill="#963600" transform="translate(1.25 2.25)"/>
<path d="M30.32 21.57Q30 20 31.45 20.67L41.64 25.37Q43 26 41.59 26.5L36.94 28.16Q36 28.5 35.72 29.46L33.95 35.47Q33.5 37 33.18 35.43Z" fill="#963600" transform="translate(1.0 1.8)"/>
<path d="M30.32 21.57Q30 20 31.45 20.67L41.64 25.37Q43 26 41.59 26.5L36.94 28.16Q36 28.5 35.72 29.46L33.95 35.47Q33.5 37 33.18 35.43Z" fill="#963600" transform="translate(0.75 1.35)"/>
<path d="M30.32 21.57Q30 20 31.45 20.67L41.64 25.37Q43 26 41.59 26.5L36.94 28.16Q36 28.5 35.72 29.46L33.95 35.47Q33.5 37 33.18 35.43Z" fill="#963600" transform="translate(0.5 0.9)"/>
<path d="M30.32 21.57Q30 20 31.45 20.67L41.64 25.37Q43 26 41.59 26.5L36.94 28.16Q36 28.5 35.72 29.46L33.95 35.47Q33.5 37 33.18 35.43Z" fill="#963600" transform="translate(0.25 0.45)"/>
<path d="M30.32 21.57Q30 20 31.45 20.67L41.64 25.37Q43 26 41.59 26.5L36.94 28.16Q36 28.5 35.72 29.46L33.95 35.47Q33.5 37 33.18 35.43Z" fill="url(#nx3619_hb-ab)"/>
<path d="M27.6 16.6 L38.4 31.9 H98.4 V-43.4 H27.6 Z" fill="url(#nx3619_hb-aa)" clip-path="url(#nx3619_hb-ac)"/>
<path d="M33.1 22.9 L37.9 25.1" fill="none" stroke="#FFFFFF" stroke-opacity="0.8" stroke-width="1.3" stroke-linecap="round"/>
<path d="M32.3 24.6 L34.0 32.8" fill="none" stroke="#FFFFFF" stroke-opacity="0.35" stroke-width="1.3" stroke-linecap="round"/>
</g>
</svg>
Prompt de IA y mejora vectorial
Quieres mejorar o cambiar el estilo de este icono? Hover 3D Button
Genera un prompt de ingenieria preciso o mejora el icono en el lienzo ahora mismo. Hover 3D Button
Generador de prompts 100% en el navegador
Verificación de fuente y licencia
LICENSE.txt
Library: Mouse | Author: Mouse Contributors | License: MIT | Sin Registro | 100% en tu Navegador
Palabras clave
#hover
#3d
#button
#mouse
Hover 3D Button - Especificaciones tecnicas del vector
La fuente, el autor y la licencia estan en la vista previa y en el detalle del icono. Hover 3D Button
| Identificador canonico del archivo | mouse/hover-3d-button |
|---|---|
| Paquete de biblioteca de origen | Mouse |
| Cuadrícula de coordenadas y viewBox | viewBox="0 0 48 48" |
| Peso sin comprimir | 4.046 bytes (~2.225 bytes gzipped) |
| Licencia SPDX y uso comercial | MIT - Gratis para uso comercial |
| Formatos de exportación admitidos | SVG, PNG (32px-2048px), WebP, ICO, React TSX, Vue 3, Svelte, Tailwind CSS, CSS Mask, Base64 |
| Garantia de seguridad y privacidad | Sin Registro | 100% en tu Navegador |
Como usar y personalizar este icono: Hover 3D Button
- Personaliza visualmente: Color, Automático (trazo y relleno), Grosor del trazo (
0.5px-4px), Ajustes de animación vectorial en vivo - Descarga el vector o la imagen: Descargar SVG, PNG (transparente), WebP (optimizado) (
2048x2048 px) - Copia el código del framework: Copia código listo para React, Next.js, Vue 3, Svelte, Angular, HTML y mascaras CSS.
- Edición vectorial profunda: Editar en el editor SVG (77.087)
Consejo de accesibilidad (WCAG 2.1): Oculta los iconos decorativos con aria-hidden y focusable false. Da un aria-label claro a los botones que solo tienen icono. Voltea las flechas en horizontal para idiomas de derecha a izquierda.
hover-3d-button.svg aria-hidden="true" focusable="false"
Mas en Iconos vectoriales 3D
Explorar3d
Japanese Prohibited Button
Fluent UI Emoji|3d-icons3d
Brand Librewolf
3D Vector Icons|brands3d
Brand Linuxmint
3D Vector Icons|brandsoutline
Cube Transparent
Heroicons|3d-iconsoutline
Blockchain Cube
Domain Icons|3d-icons
Blockchain Cube
Domain Icons|3d-icons
Aws Open 3D Engine
Authentic Brand Logos|3d-icons
Cube Focus
Phosphor Icons|3d-icons
Cube Three
IconPark|3d-icons
Next Track Button
Fluent UI Emoji|3d-icons
Brand Magnifying Glass
3D Vector Icons|brands
3D Depth Stack
Mouse|3d-icons
3D Touch Pad
Mouse|3d-icons
Cursor 3D Move
Mouse|3d-icons
3D Right Click
Mouse|3d-icons
3D Wireless
Mouse|3d-icons
ID Button
Fluent UI Emoji|3d-icons
Japanese Application Button
Fluent UI Emoji|3d-icons
Japanese Bargain Button
Fluent UI Emoji|3d-icons
Japanese Congratulations Button
Fluent UI Emoji|3d-icons
Japanese Discount Button
Fluent UI Emoji|3d-icons
Japanese Free Of Charge Button
Fluent UI Emoji|3d-icons
Japanese Here Button
Fluent UI Emoji|3d-iconsExplorar más
Preguntas frecuentes
Hover 3D Button - Preguntas frecuentes
¿Qué licencia cubre Hover 3D Button? +
Hover 3D Button proviene de Mouse y está cubierto por MIT. Atribución: Crédito obligatorio.
¿En qué formatos puedo descargar Hover 3D Button? +
Hover 3D Button es un vector de estilo 3d (viewBox 0 0 48 48). Descarga SVG, PNG, WebP o ICO, o copia código React TSX, Vue 3, Svelte, Tailwind CSS, CSS Mask o Base64 desde esta página.
¿De dónde procede el icono Hover 3D Button? +
Hover 3D Button forma parte de la biblioteca Mouse de Mouse Contributors, en la categoría Iconos vectoriales 3D. El texto completo de la licencia está en el archivo de aviso de la biblioteca enlazado en esta página.
100% en tu Navegador | 77.087 iconos
Editor SVG
Edita rutas, capas, colores y animaciones en tu navegador y exporta SVG limpio, PNG o código para frameworks.