Los botones PSD para páginas web son uno de los recursos más útiles para diseñadores que trabajan en Photoshop: kits editables con botones para call-to-action, formularios, navegación y elementos UI listos para personalizar antes de pasarlos a HTML/CSS. En este post tienes 9 sitios donde descargar botones gratis en 2026. Y si prefieres hacerlo tú, también verás cómo crear un botón en Photoshop paso a paso.
Repositorios principales
1
Freepik, ahora Magnific (botones PSD)
Catálogo enorme con cientos de botones PSD en distintos estilos: flat, glassmorphism, neumorfismo, 3D. En abril de 2026 Freepik pasó a llamarse Magnific, pero la biblioteca de recursos sigue ahí. Free con atribución; Premium sin atribución.
Free con atribución · Premium sin atribución · Ir a Freepik
2
Pixeden (UI buttons)
Especializado en UI kits con sets de botones premium. Tier gratuito generoso con botones bien diseñados, perfecto para mockups y prototipos.
Free + Premium · Comercial · Ir a Pixeden
3
Vecteezy (botones en vector y PNG)
Miles de botones web en vector y PNG: planos, 3D, de juego, neumórficos. Los vectoriales los editas en Illustrator o los abres en Photoshop a cualquier tamaño sin perder calidad. Free con atribución; Pro sin atribución.
Free con atribución · Pro sin atribución · Ir a Vecteezy
Plataformas curadas por diseñadores
4
Dribbble (button freebies)
Diseñadores top publican botones PSD como freebies. Filtra por «free» y «buttons» para encontrar los descargables.
Licencia variable por autor · Ir a Dribbble
5
Behance (free button PSDs)
Proyectos de portfolio con archivos PSD descargables. Los kits suelen incluir todos los estados (normal, hover, active, disabled) bien organizados.
Licencia variable por autor · Ir a Behance
Tip: Para UI kits PSD premium con cientos de componentes (no solo botones) y licencia comercial sin atribución, en Envato Elements tienes kits completos para proyectos profesionales.
Cómo hacer un botón en Photoshop paso a paso
Si no encuentras el botón que encaja con tu marca, hacerlo tú lleva diez minutos. Así lo hago yo, con formas vectoriales para poder cambiar el tamaño sin que se pixele:
- Crea el documento: 800×400 px con fondo blanco. Te deja margen para la sombra y para los distintos estados.
- Dibuja la forma: herramienta Rectángulo (U), un rectángulo de 240×64 px. En el panel Propiedades pon el radio de las esquinas a 12 px, o a 32 px si lo quieres en forma de píldora.
- Dale volumen: rellénalo con el color de tu marca y abre el Estilo de capa. Añade una Superposición de degradado sutil, más clara arriba y con opacidad del 20-30%. Después, una Sombra paralela de 4 px de distancia, 10 px de tamaño y 20% de opacidad.
- Escribe el texto: herramienta Texto (T), entre 18 y 24 px y peso seminegrita. Selecciona las dos capas y céntralas con las opciones de alineación de la barra superior.
- Crea los estados: duplica el grupo para el estado hover (el fondo un 10% más oscuro) y otro para el pulsado (sin sombra y 2 px más abajo). Usa una mesa de trabajo por estado y lo tendrás todo ordenado.
- Exporta: Archivo → Exportar → Exportar como, en PNG y a 2x para pantallas de alta densidad. Si la web la programas tú, pasa los valores de color, radio y sombra a CSS en vez de usar la imagen.
¿Lo quieres metálico o en 3D? Aplica al botón un Bisel y relieve con técnica Cincelar suave y una Superposición de degradado gris. En el tutorial de efecto metal en Photoshop tienes varios acabados que funcionan igual sobre una forma que sobre un texto.
Alternativas modernas: botones en CSS
En 2026 el flujo profesional pasa de PSD a Figma + CSS directo. Si vas a programar tú la web, mejor coger un botón Figma (o diseñar en CSS desde cero) que partir de un PSD. Te dejo cuatro recursos modernos donde encontrar botones CSS listos para pegar.
6
UIverse (botones CSS)
Comunidad con miles de botones CSS gratis copy-paste. Cada uno con su HTML+CSS listo para pegar. Estilos: flat, neon, 3D, glassmorphism, animados.
Free · MIT · Ir a UIverse
7
Figma Community (button kits)
Miles de archivos Figma gratuitos con kits de botones. Mucho más útiles que PSD para flujos modernos: importas el archivo .fig y editas directamente.
Free · Licencia variable · Ir a Figma Community
8
Flowbite (botones Tailwind)
Si usas Tailwind, es la librería gratuita de referencia. Botones con variantes de color, tamaño, icono y estado de carga, con el código HTML+Tailwind listo para copiar. Tailwind UI, la que recomendaba antes, ahora es Tailwind Plus y es de pago.
Free · Código abierto (MIT) · Ir a Flowbite
9
CodePen (botones CSS)
Repositorio masivo de pens con botones CSS animados, glitch, gradients, etc. Para inspiración y código listo para usar.
Licencia variable por autor · Ir a CodePen
¿Prefieres el botón ya hecho en CSS?
En mi pack CSS gratis tienes 6 estilos de botón: base, ghost, degradado, 3D presionable, con flecha animada e interruptor on/off. Además, 36 estilos más con un catálogo para copiar cada uno en un clic. Apúntate y te lo envío al correo.
Cómo editar un botón PSD
- Abre el .psd y verifica que el archivo tiene capas separadas (no rasterizadas).
- Edita el texto con la herramienta Texto (T).
- Cambia el color con una capa de ajuste «Tono/Saturación» o «Color sólido» con modo «Color».
- Exporta como PNG transparente para web, o usa «Generar activos» para múltiples estados.
Preguntas frecuentes
¿PSD o CSS para botones web en 2026?
CSS si vas a programar la web. PSD solo para mockups y presentaciones a cliente. Los botones CSS son más ligeros, accesibles y mantenibles. UIverse y Flowbite tienen cientos listos para pegar.
¿Qué tamaño debe tener un botón web?
Para un botón principal, entre 44 y 56 px de alto. De ancho, deja unos 24 px de margen a cada lado del texto. En móvil, que el área pulsable no baje de 44×44 px aunque el botón se vea más pequeño.
¿Cómo me aseguro de que el botón es accesible?
Verifica: contraste 4.5:1 mínimo texto/fondo (WCAG AA), tamaño mínimo 44×44px (área táctil iOS), estados focus visibles con outline, etiqueta aria-label si solo tiene icono.
Conclusión
Para mockups y presentaciones a cliente: Freepik (Magnific), Pixeden o Vecteezy. Para implementación web real: UIverse, Flowbite o Figma Community. Para un botón a medida de tu marca: hazlo en Photoshop en diez minutos con los pasos de arriba.
Y si lo que necesitas no es un botón sino la web entera, echa un vistazo a mis servicios de diseño web.
