Aquí en Design Shack nos gusta presentar una gama completa de tutoriales, desde proyectos expertos en PHP hasta consejos CSS muy simples. El tutorial de hoy está dirigido a aquellos que aún se encuentran en las etapas iniciales de CSS.
Una de las preguntas más frecuentes que recibo de los principiantes de CSS es: "¿Cómo puedo crear un botón?" Es una pregunta simple con una respuesta complicada. Hay bastantes maneras de hacerlo y, lamentablemente, también hay algunas maneras de equivocarse. Cuando empecé con CSS, descubrir la sintaxis de los botones era uno de los problemas más persistentes que enfrentaba, parecía que siempre lo estaba haciendo mal. Hoy vamos a recorrer un proceso muy simple y flexible que puede aplicar a cualquier botón que cree. Más importante que el resultado final es la explicación detallada en cada punto que explica por qué lo hacemos de esa manera.
Paso 1: El HTML
Lo creas o no, esta es una de las partes más difíciles. Para un programador experimentado, parece tan simple. Para un principiante, sin embargo, saber dónde comenzar con un botón puede ser bastante difícil. ¿Deberías usar el botón? Etiqueta HTML? O tal vez una etiqueta de párrafo? ¿Qué partes debe enrollar el enlace?
Resulta que la sintaxis más simple y más utilizada es simplemente implementar una etiqueta de ancla antigua (los botones de formulario suelen usar "entrada"). Desde un punto de vista funcional, todo lo que realmente estamos tratando de crear es un enlace que, al hacer 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 meramente estética y no indica necesariamente ninguna funcionalidad especial.
Aquí hay un fragmento de HTML ampliamente utilizado que hace el trabajo perfectamente mientras se mantiene agradable y conciso:
Si no necesitas una división, no la uses
Un problema que solía encontrar cuando empecé 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.
Sin embargo, esto es completamente innecesario y puede crear problemas tanto con el clic como con el hover. En el ejemplo anterior, todo nuestro elemento será el enlace. Si envolvimos esto en un div y diseñamos que, solo la parte de texto del botón sería un enlace, lo que significa que el usuario posiblemente podría hacer clic en el botón sin resultado.
¿Por qué usar una clase?
Quizás lo más importante que hay que notar acerca de este fragmento de código es que hemos agregado una clase, que genéricamente he etiquetado como botón? Hay un par de razones para esto.
En primer lugar, necesitamos una forma de apuntar y diseñar este botón en nuestro CSS sin necesariamente apuntar a todas las etiquetas de anclaje en la página. Casi nunca es el caso que querrá que cada enlace sea un botón idéntico. Sin embargo, es factible y muy probable que, de hecho, desee reutilizar el estilo del botón en algún momento. Por esta razón aplicamos una clase en lugar de una ID. De esa manera, siempre que queramos convertir un enlace de texto plano en un botón bonito, simplemente aplicamos nuestro botón? clase y hemos terminado!
Paso 1 Vista previa
En este punto, solo debe tener un enlace de texto sin formato con un estilo predeterminado.
Paso 2: Estilos de botones básicos
Ahora que tenemos nuestro HTML listo, es hora de saltar al CSS. ¿Recuerdas que configuramos un botón? clase para el propósito expreso de la orientación CSS, así que asegúrese de usarla para este paso:
Lo primero que queremos hacer en nuestro CSS es definir el cuadro básico que conformará la forma de nuestro botón. Aquí están los estilos que utilicé. Tenga en cuenta que mis opciones y dimensiones de color son completamente opcionales, siéntase libre de usar lo que quiera.
Lo más importante que hice aquí fue configurar? Mostrar? ¿bloquear?. Esto nos permitirá convertir nuestro enlace de texto en un cuadro más grande con un ancho y alto definidos. Después de eso simplemente establezco mi tamaño y color de fondo, luego agregué un borde. Voy a usar? Rgba? un poco, si quieres hacer esto un poco más amigable para los navegadores más antiguos, consulta este artículo sobre la declaración de fallbacks rgba.
Paso 2 Vista previa
Después del paso dos, deberías tener un cuadro de aspecto bastante aburrido con un texto imposible de leer dentro.
Paso 3: Estilos de texto
A continuación, es hora de atacar ese texto feo. Para asegurarme de que puede seguir cada paso, simplemente seguiré agregando a lo que hemos creado previamente con comentarios para ayudarlo a ver cada paso:
Aquí vemos que he agregado un color de texto que es esencialmente un tono más oscuro del color del botón. Este truco se logra configurando el color del texto en negro y reduciendo la opacidad mediante rgba. A continuación, alineé el texto al centro y declaré un montón de cosas usando la abreviatura de la fuente.
Fuente abreviada
La abreviatura de CSS es una forma sencilla de declarar un conjunto de propiedades y estilos de CSS en una línea. Primero, declaré el peso (negrita), luego el tamaño de fuente / altura de línea y finalmente la familia de fuentes. Observe que la altura de línea se establece exactamente a la altura del botón. Esta es una forma sencilla de asegurarse de que su texto esté centrado verticalmente.
Para obtener más información sobre CSS Shorthand, consulte 6 CSS Shorthand Tricks que todo desarrollador debería saber.
Paso 3 Vista previa
¡Después del paso tres, tu botón debería comenzar a verse como un botón!
Paso 4: Fancy CSS3 Styles
El paso anterior nos lleva a un botón agradable y funcional que no se ve tan mal. Desafortunadamente, es bastante aburrido. Sin embargo, la parte importante es que este botón debe lucir perfecto en la mayoría de los navegadores, por lo que ahora podemos proceder a agregar algunas novedades de CSS sin preocuparnos demasiado por dejar atrás los navegadores antiguos. En última instancia, no me importa realmente si IE decide deshacerse de estos próximos estilos porque mi botón debería funcionar bien para aquellos usuarios en su estado actual.
Fácilmente podemos dejarnos llevar y escribir cincuenta líneas de CSS para hacer que nuestro botón brille y sea bonito, pero lo haré realmente simple para los propósitos de hoy:
Cada uno de estos puede ser difícil de leer, así que repasemos uno por uno. Primero, agregué un degradado que usa el color que ya teníamos y se desvanece a algo minúsculo a oscuro. Dejé mi color de fondo anterior sobre esa sección para actuar como una alternativa.
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. Como quiero que todas mis esquinas sean iguales, simplemente declaro un valor y se aplica de manera uniforme.
Finalmente, arrojé algunas sombras. Tanto el cuadro 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 mucho trabajo o código. Para la sombra del texto, también apliqué un desplazamiento vertical y configuré el color en blanco a una opacidad del 20%. Esta es una forma súper fácil de crear un efecto de tipografía y hacer que el texto aparezca como si se hundiera en el botón.
Utilice Prefixr para los prefijos del navegador
Tenga en cuenta que el código anterior no es compatible con todos los navegadores. En las etapas iniciales de la experimentación, odio arruinar mi código con media docena de prefijos de navegador y a menudo olvido si un navegador dado tiene una sintaxis única.
Una vez que tengo las cosas como Espresso (mi IDE de elección) usando la sintaxis básica, puedo agregar todo ese código en una pequeña herramienta gratuita llamada Prefixr, que la procesará y la escupiré con todas Las versiones específicas correctas disponibles del navegador se agregan automáticamente.
Paso 4 Vista previa
Después del paso cuatro, su botón debería verse mucho más definido que antes. ¡Casi terminado!
Paso 5: Estilos Hover
El paso final en nuestro proceso de botones es definir el comportamiento de desplazamiento. Cuando el usuario se desplaza sobre el botón, siempre es bueno obtener una pequeña retroalimentación visual que sea más que el cambio de cursor predeterminado. Una vez más, podríamos esforzarnos al máximo, pero lo mantendré simple y aligeraré un poco el gradiente:
Ahora, cuando se desplaza sobre el botón, su color / brillo cambiará. Es un efecto sutil, pero definitivamente es 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 más importante es que debe tener una idea clara del flujo de trabajo básico que debe seguir para elaborar un botón con CSS.
Manifestación: Para ver el botón en acción, haga clic aquí o en la imagen de arriba.
jsFiddle: Para jugar con el código, haga clic aquí.
Conclusión
Aprendimos muchas cosas muy importantes hoy. Primero, vimos que podemos usar una etiqueta de anclaje HTML básica como punto de partida para nuestro botón y que es bueno diseñar botones con clases reutilizables. También aprendimos cómo comenzar diseñando un botón básico que funcionará bien en todos los navegadores y luego agregará un toque adicional en lugar de basar la estructura completa del botón en técnicas que no serán ampliamente accesibles. Finalmente, vimos cómo simplificar las cosas codificando con las propiedades básicas de CSS3 hasta que todo esté bien, y luego seguimos con un viaje a Prefixr, que expande nuestro código a algo tan compatible con todos los navegadores como sea posible.
Deja un comentario abajo y déjanos saber lo que piensas. Si eres un principiante, ¿fue útil para ti? Si eres un profesional experimentado, ¿qué harías diferente?