Este Generador de botones de Marko Denic es de esas páginas para guardar porque hace solo una cosa y la hace bien: generar código CSS para botones de páginas HTML. Más rápido y fácil, imposible.
Todo lo que hay que hacer es elegir el botón que prefieras y hacer clic; el código CSS queda «copiado» en el portapapeles y lo puedes pegar luego en cualquier editor de código HTML/CSS. Hay diferentes estilos del tipo:
Bordes redondeados
Sombras
Con cambio de color al pasar por encima (hover)
Con una flechita animada
Con animación estilo «cortinilla»El resultado es algo del tipo
.css-button-3d--blue {
min-width: 130px;
height: 40px;
color: #fff;
padding: 5px 10px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
outline: none;
border-radius: 5px;
border: none;
background: #3d348b;
box-shadow: 0 5px #2c0b8e;
}
.css-button-3d--blue:hover {
box-shadow: 0 3px #2c0b8e;
top: 1px;
}
.css-button-3d--blue:active {
box-shadow: 0 0 #2c0b8e;
top: 5px;
}Más o menos complejo según la opción que elijas. Además de eso si no te convencen los colores y quieres usar los tuyos propios basta cambiarlos en el código de background-color, color, box-shadow y algún otro donde se mencionan.
Relacionado:
10 plantillas en CSS de una sola línea
Simple, elegante y rápido: new.css simplifica el diseño HTML/CSS
10 plantillas en CSS de una sola línea
Un editor CSS de degradados de color para textos en páginas web
Un repositorio de código HTML enrevesado con componentes de interfaz
Vídeo: CSS grid para 10 plantillas con las que crear diseños modernos
NES.css: para retrotraer el estilo de las páginas web# Enlace Permanente