Aquí en Design Shack nos gusta presentar una gama completa de tutoriales, desde proyectos PHP expertos hasta consejos CSS muy simples. El tutorial de hoy está dirigido a aquellos que todavía están en las etapas de principiantes de CSS.
Una de las preguntas más frecuentes que recibo de los principiantes de CSS es, "¿Cómo creo un botón?" Es una pregunta simple con una respuesta complicada. Hay bastantes maneras de hacerlo y, por desgracia, también hay bastantes maneras de equivocarse. Cuando comencé en CSS, averiguar toda la sintaxis del botón fue uno de los problemas más persistentes que enfrenté, parecía que siempre lo estaba haciendo mal. Hoy vamos a recorrer un proceso muy sencillo y flexible que puedes aplicar a cualquier botón que crees. Más importante que el resultado final es la explicación en profundidad en cada punto que describe por qué lo hacemos de esa manera.
Paso 1: El HTML
Lo creas o no, esta es una de las partes más complicadas. Para un codificador experimentado, parece tan simple. Para un principiante, sin embargo, saber por dónde empezar con un botón puede ser bastante difícil. ¿Debería usar la etiqueta HTML "botón"? ¿O tal vez una etiqueta de párrafo? ¿Qué partes debe envolver el enlace?
Resulta que la sintaxis más simple y más utilizada es sólo para implementar una etiqueta de anclaje simple y antigua (botones de formulario a menudo utilizan "entrada"). Desde un punto de vista funcional, todo lo que realmente estamos tratando de crear es un enlace que, cuando se hace clic, nos lleva a un lugar nuevo, que es exactamente lo que hace un enlace HTML básico. A menudo en el diseño web, la elección de convertir algo en un botón es simplemente estética y no necesariamente indica ninguna funcionalidad especial.
Aquí hay un fragmento de HTML ampliamente utilizado que hace el trabajo perfectamente mientras se mantiene agradable y sucinto:
1 |
Si no necesitas un Div, no uses uno
Un problema que solía encontrar cuando comencé a codificar es que a menudo pensaba que necesitaba un div para crear cualquier cosa. Usando esta lógica defectuosa, envolvería mi ancla en un div y luego aplicaría la mayor parte del estilo al div.
Esto es completamente innecesario sin embargo y puede crear problemas con el clic y el desplazamiento. En el ejemplo anterior, todo nuestro elemento será el enlace. Si ajustamos esto en un div y le damos estilo a eso, solo la parte del texto del botón sería un vínculo, lo que significa que el usuario podría hacer clic en el botón sin ningún resultado.
¿Por qué usar una clase?
Tal vez lo más importante a tener en cuenta acerca de este fragmento de código es que hemos agregado una clase, que he etiquetado genéricamente "botón". Hay un par de razones para esto.
En primer lugar, necesitamos una manera de apuntar y aplicar estilo a este botón en nuestro CSS sin apuntar necesariamente a todas las etiquetas de anclaje en la página. Casi nunca es el caso de que usted querrá que cada enlace sea un botón idéntico. Sin embargo, es factible y muy probable que de hecho querrá reutilizar el estilo de botón en algún momento. Por esta razón aplicamos una clase en lugar de un ID. De esa manera, cada vez que queremos convertir un enlace de texto sin formato a un buen botón, simplemente aplicamos nuestra clase "botón" y hemos terminado!
Paso 1 Vista previa
En este punto, solo debe tener un vínculo de texto sin formato con el estilo predeterminado.
Paso 2: Estilos básicos de botones
Ahora que tenemos nuestro HTML listo para usar, es hora de saltar al CSS. Recuerde que configuramos una clase de "botón" para el propósito expreso de la segmentación CSS, así que asegúrese de usarla para este paso:
1 | .button ?
/* Código Aquí *
/-
|
Lo primero que queremos hacer en nuestro CSS es definir el cuadro básico que conformará nuestra forma de botón. Aquí están los estilos que usé. Tenga en cuenta que mis opciones de color y dimensiones son completamente opcionales, no dude en utilizar lo que desee.
1 2 3 4 5 6 7 | .botón ?
pan
talla:
b
loque
;
alt
ura:
1
00px
;
anc
ho:
3
00px
;
ant
ecedentes
:
#34696f
;
bor
de: 2p
x
sól
ido r
g
ba (3
3,
68
,
72
,
0.59
);
}
|
Lo más importante que hice aquí fue establecer "display" en "block". Esto nos permitirá convertir nuestro enlace de texto en una caja más grande con una anchura y altura definidas. Después de eso, simplemente dete mi tamaño y color de fondo, luego agregué un borde. Voy a utilizar "rgba" bastante, si quieres hacer esto un poco más amigable para los navegadores más antiguos, echa un vistazo a este artículo sobre la declaración de respaldos rgba.
Vista previa del paso 2
Después del paso dos usted debe tener una caja de aspecto bastante aburrido con un poco de texto imposible de leer en el interior.
Paso 3: Estilos de texto
A continuación, es hora de atacar ese texto feo. Para asegurarte de que puedes mantenerte al día con cada paso, simplemente seguiré agregando a lo que hemos creado anteriormente con comentarios para ayudarte a ver cada paso:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 | .botón ?
/*Pa
so 2: Estilos básicos de botones*/
pan
talla:
b
loque
;
alt
ura:
1
00px
;
anc
ho:
3
00px
;
ant
ecedentes
:
#34696f
;
bor
de: 2p
x
sól
ido r
g
ba (3
3,
68
,
72
,
0.59
);
/*Pa
so 3: Estilos de texto*/
col
or: r
gba (0
,
0
,
0
,
0.55
);
alin
eación de tex
to
: centr
o;
fue
nte:
b
old
3
.2em/
1
00px
"
Helvetica Neue"
,
Arial
,
Helvetica
, Geneva,
sans-serif
;
}
/*Paso 3: Estilo de enlace*/
a.button ?
deco
ración de texto:
ni
ngun
o;
}
|
Aquí vemos que he añadido en un color de texto que es esencialmente un tono más oscuro del color del botón. Este truco se logra estableciendo el color del texto en negro y reduciendo la opacidad a través de rgba. A continuación, alcentro el texto y declaro un montón de cosas usando la abreviatura de fuente.
Abreviatura de fuente
La abreviatura CSS es una manera ordenada de declarar un montón de propiedades y estilos CSS en una línea. Primero, declaré el peso (negrita), luego font-size/line-height y finalmente la familia de fuentes. Observe que la altura de línea se establece exactamente en la altura del botón. Esta es una manera sencilla de asegurarse de que el texto está centrado verticalmente.
Para obtener más información sobre CSS Shorthand, echa un vistazo a 6 trucos cortos CSS que todo desarrollador debe saber.
Paso 3 Vista previa
Después del paso tres su botón en realidad debe empezar a parecer un botón!
Paso 4: Estilos CSS3 de lujo
El paso anterior nos lleva a un buen botón funcional que no se ve tan mal. Desafortunadamente, es bastante aburrido. La parte importante sin embargo es que este botón debe verse perfecto en la mayoría de los navegadores, por lo que ahora podemos proceder a agregar algunas bondades CSS más recientes sin preocuparse demasiado por dejar atrás los navegadores más antiguos. En última instancia, realmente no me importa si IE decide abandonar estos siguientes estilos porque mi botón debería funcionar bien para aquellos usuarios en su estado actual.
Podemos dejarnos llevar fácilmente y escribir cincuenta líneas de CSS para hacer que nuestro botón brille y sea bonito, pero lo mantendré muy simple para los propósitos de hoy:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | .botón ?
/*Pa
so 2: Estilos básicos de botones*/
pan
talla:
b
loque
;
alt
ura:
1
00px
;
anc
ho:
3
00px
;
ant
ecedentes
:
#34696f
;
bor
de: 2p
x
sól
ido r
g
ba (3
3,
68
,
72
,
0.59
);
/*Pa
so 3: Estilos de texto*/
col
or: r
gba (0
,
0
,
0
,
0.55
);
alin
eación de tex
to
: centr
o;
fue
nte:
b
old
3
.2em/
1
00px
"
Helvetica Neue"
,
Arial
,
Helvetica
, Geneva,
sans-serif
;
/*P
aso 4: Estilos CSS3 de lujo*/
fon
do: gradie
nte lineal (super
ior
,
#34696f
,
#2f5f63
);
rad
io de borde:
50px
;
somb
ra de caja:
0
8px
0
#1b383b
;
somb
ra de texto
:
0
2px
2px
rgba(
255
,
255
,
255
,
0.2
);
}
/*Paso 3: Estilo de enlace*/
a.button ?
deco
ración de texto:
ni
ngun
o;
}
|
Cada uno de estos puede ser difícil de leer, así que vamos a ir a través de ellos uno por uno. En primer lugar, agregué un degradado que utiliza el color que ya teníamos en su lugar y se desvanece a algo diminuto por más oscuro. Dejé mi color de fondo anterior por encima de esa sección para actuar como un respaldo.
El siguiente es el radio del borde. Decidí ir con una esquina redondeada muy pesada que le dará al botón una forma de píldora. Puesto que quiero que todas mis esquinas sean iguales, simplemente declaro un valor y se aplica uniformemente.
Finalmente, arrojé algunas sombras. Tanto la caja como la sombra de texto que utilicé son un poco peculiares. Para la sombra de la caja, a le dio un desplazamiento vertical pero no horizontal y también dejó el calado en 0. Esto le dará un pequeño efecto 3D falso que no requiere demasiado trabajo o código. Para la sombra de texto, también apliqué un desplazamiento vertical y defje el color en blanco en 20% de opacidad. Esta es una manera muy fácil de crear un efecto de letra y hacer que el texto aparezca como si se hunda en el botón.
Usar Prefijo para prefijos de navegador
Tenga en cuenta que el código anterior no es compatible entre exploradores en absoluto. En las etapas iniciales de la experimentación, odio mucking mi código con media docena de prefijos del navegador y a menudo olvidar si un navegador dado tiene o no una sintaxis única.
Una vez que tengo las cosas que se ven de la manera que quiero en Espresso (mi IDE de elección) usando la sintaxis básica, puedo convertir todo ese código en una pequeña herramienta gratuita llamada Prefixr, que lo procesará y escupirá mi código con todas las versiones específicas del navegador disponibles correctas agregadas automáticamente.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | .botón ?
/*Pa
so 2: Estilos básicos de botones*/
pan
talla:
b
loque
;
alt
ura:
1
00px
;
anc
ho:
3
00px
;
ant
ecedentes
:
#34696f
;
bor
de: 2p
x
sól
ido r
g
ba (3
3,
68
,
72
,
0.59
);
/*Pa
so 3: Estilos de texto*/
col
or: r
gba (0
,
0
,
0
,
0.55
);
alin
eación de tex
to
: centr
o;
fue
nte:
b
old
3
.2em/
1
00px
"
Helvetica Neue"
,
Arial
,
Helvetica
, Geneva,
sans-serif
;
/*P
aso 4: Estilos CSS3 de lujo*/
fon
do: -webk
it-linear-gradient(top
,
#3
4696f,
#
2f5f63
);
fon
do: -moz-l
inear-gradient (superi
or,
#34696f
,
#2f5f63
);
fon
do: -o-l
ineal-gradient(top
, #
3
4696f,
#
2f5f63
);
fon
do: -ms-
linear-gradient(top
, #
3
4696f,
#
2f5f63
);
fon
do: gradie
nte lineal (super
ior
,
#34696f
,
#2f5f63
);
-we
bkit-border-radius:
50px
;
-kh
tml-border-radius:
50px
;
-mo
z-border-radius:
50px
;
rad
io de borde:
50px
;
-we
bkit-box-shadow: 0
8
px
0
#1b383b
;
-mo
z-box-shadow: 0
8
px
0
#1b383b
;
somb
ra de caja:
0
8px
0
#1b383b
;
somb
ra de texto
:
0
2px
2px
rgba(
255
,
255
,
255
,
0.2
);
}
/*Paso 3: Estilo de enlace*/
a.button ?
deco
ración de texto:
ni
ngun
o;
}
|
Vista previa del paso 4
Después del paso cuatro, el botón debería verse mucho más nítido que antes. ¡Ya casi termino!
Paso 5: Estilos hover
El último paso en nuestro proceso de botón es definir el comportamiento de desplazamiento. Cuando el usuario pasa el cursor sobre el botón, siempre es bueno obtener un poco de comentarios visuales que es más que el cambio de cursor predeterminado. Una vez más, podríamos salir a todos con esto, pero lo mantendré simple y sólo aclararé un poco el gradiente:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | .botón ?
/*Pa
so 2: Estilos básicos de botones*/
pan
talla:
b
loque
;
alt
ura:
1
00px
;
anc
ho:
3
00px
;
ant
ecedentes
:
#34696f
;
bor
de: 2p
x
sól
ido r
g
ba (3
3,
68
,
72
,
0.59
);
/*Pa
so 3: Estilos de texto*/
col
or: r
gba (0
,
0
,
0
,
0.55
);
alin
eación de tex
to
: centr
o;
fue
nte:
b
old
3
.2em/
1
00px
"
Helvetica Neue"
,
Arial
,
Helvetica
, Geneva,
sans-serif
;
/*P
aso 4: Estilos CSS3 de lujo*/
fon
do: -webk
it-linear-gradient(top
,
#3
4696f,
#
2f5f63
);
fon
do: -moz-l
inear-gradient (superi
or,
#34696f
,
#2f5f63
);
fon
do: -o-l
ineal-gradient(top
, #
3
4696f,
#
2f5f63
);
fon
do: -ms-
linear-gradient(top
, #
3
4696f,
#
2f5f63
);
fon
do: gradie
nte lineal (super
ior
,
#34696f
,
#2f5f63
);
-we
bkit-border-radius:
50px
;
-kh
tml-border-radius:
50px
;
-mo
z-border-radius:
50px
;
rad
io de borde:
50px
;
-we
bkit-box-shadow: 0
8
px
0
#1b383b
;
-mo
z-box-shadow: 0
8
px
0
#1b383b
;
somb
ra de caja:
0
8px
0
#1b383b
;
somb
ra de texto
:
0
2px
2px
rgba(
255
,
255
,
255
,
0.2
);
}
/*Paso 3: Estilos de enlace*/
a.button
2
?
deco
ración de texto:
ni
ngun
o;
}
/*Paso 5: Estilos hover*/
a.button:hover ?
ant
ecedentes
:
#3d7a80
;
fon
do: -webk
it-linear-gradient(top
,
#3
d7a80,
#
2f5f63
);
fon
do: -moz
-linear-gradient(top
, #
3
d7a80,
#
2f5f63
);
fon
do: -o-li
neal-gradient (arri
ba,
#
3d7a80
,
#2f5f63
);
fon
do: -ms-
linear-gradient(top
, #
3
d7a80,
#
2f5f63
);
fon
do: gradie
nte lineal (super
ior
,
#3d7a80
,
#2f5f63
);
}
|
Ahora, cuando pase el cursor sobre el botón, su color/brillo cambiará. Es un efecto sutil, pero es definitivamente lo suficientemente fuerte como para que cualquier usuario lo note, incluso si son daltónicos.
¡Terminado!
¡Después del paso cinco, ya terminaste! Ahora debería tener un hermoso botón creado completamente con CSS y HTML. Sin embargo, lo que es más importante, debería tener una fuerte sensación de que el flujo de trabajo básico siga para crear un botón usando CSS.
Demostración: Para ver el botón en acción, haga clic aquí o en la imagen de arriba.
jsFiddle: Para fiddle con el código, haga clic aquí.
Conclusión
Hoy aprendimos muchas cosas muy importantes. En primer lugar, vimos que podemos usar una etiqueta de anclaje HTML básica como punto de partida para nuestro botón y que es bueno aplicar estilo a los botones con clases reutilizables. También aprendimos a empezar por el estilo de un botón básico que funcionará bien en todos los navegadores y para dar un toque adicional más tarde en lugar de basar toda la estructura del botón en técnicas que no serán ampliamente accesibles. Finalmente, vimos cómo mantener las cosas simples codificando con propiedades básicas de CSS3 hasta que lo hacemos todo bien, y luego lo seguimos con un viaje a Prefixr, que expande nuestro código a algo lo más compatible posible entre navegadores.
Deje un comentario a continuación y háganos saber lo que piensa. Si eres un principiante, ¿te ha ayudado? Si eres un profesional experimentado, ¿qué harías de manera diferente?