Hola comunidad Hack x Crack! Quiero compartir con ustedes un pequeño tutorial para crear enlaces pero en forma de botones.
PRIMERO: debemos de tener nuestro código de html ya listo.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Botones</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<a target="_blank" href="https://hackxcrack.net/foro/profile/R3L1ANT/">Perfil de R3LI4NT <span>HxC</span></a>
</body>
</html>
Lo guardan con la extensión .html (index.html)
Datos:
- Recuerden que en <link rel="stylesheet" type="text/css" href="estilos.css"> tienen que especificar la hoja de estilos CSS a su documento HMTL.
- En href="https://URL.com" agregan la dirección de la página de destino, puede ser su facebook, twitter, instagram, etc.
- Si agregamos target="_blank" antes de href se abrira el link en una nueva pestaña sin necesidad de salir del documento.
SEGUNDO: una vez hecho lo anterior proseguiremos a darle diseño/aspecto a nuestro enlace en CSS.
a {
font-size: 20px;
text-decoration:none;
margin:10px 15px;
display:inline-block;
background:#1CFF01;
color:#000;
padding:10px 20px;
box-shadow:0px 5px 0px #139903;
border-radius: 60px;
font-family:Arial;
font-weight:bold;
border:2px solid #000;
}
a:hover {
box-shadow:0px 3px 0px #068001;
}
a:active {
box-shadow:none;
}
a span {
color:#FF7C00;
}
Datos:
- Con "font-size" modificamos el tamaño de la fuente.
- Con "text-decoration" se utiliza para agregar el texto en subrayado(underline) o tachado(overline) (normalmente se ve en los enlaces), si colocamos "none" se quitara.
- Con "margin" podemos modificar un espaciado, esto se utiliza mayormente cuando creamos más de un botón, en este caso estoy creando uno solo pero lo agregué para que tengan un idea como funciona.
- Con "display:inline-block" es para convertirlo en bloque y hacer un espaciado, en pocas palabras... para que no quede "pegado hacia arriba".
- Con "back-ground" le agregamos un color al botón, para ver códigos de colores pueden hacer click aquí (https://htmlcolorcodes.com/es/).
- Con "color" agregamos color pero al texto, yo lo deje en negro #000.
- Con "padding" nos sirve para agregar un espacio entre el texto y los bordes.
- Con "box-shadow" podemos insertar una sombra, a mi gusto recomiendo que sea del mismo color pero más oscura.
- Con "border-radius" agregamos un borde en las esquinas, especifican los pixeles que deseen.
- Con "font-family" podemos asignar una fuente a nuestro texto, recueden que si la fuente tiene espacios como "Times New Roman" deben de agregarle comillas.
- Con "font-weight" le agregamos texto en negrita.
- Con "border" insertamos un borde (none, hidden, dotted, dashed, solid, double, groove, ridge, inset y outset).
Estado HOVER
- Con "box-shadow" al pasar el cursor sobre encima del botón la sombra desaparecera pero un poco, le da un efecto genial.
Estado ACTIVE
- Con "box-shadow:none;" esta función hace que al darle un click al botón la sombra desaparecera totalmente.
Botón #1
RESULTADO
(https://imagizer.imageshack.com/img923/9793/n0pgEL.png) (https://imagizer.imageshack.com/img922/2189/pJtNUr.png) (https://imagizer.imageshack.com/img922/9684/EA1KvP.png)
Botón #2
Código CSS
a {
text-decoration: none;
padding: 10px;
display:inline-block;
font-weight: 600;
font-size: 20px;
background-color: #03B27D;
color: #ffffff;
border-radius: 8px;
border: 3px solid #025556;
}
a:hover {
background-color: #ffffff;
color: #000;
}
El código HTML es el mismo.
RESULTADO
(https://imagizer.imageshack.com/img924/2208/htBrJ9.png) (https://imagizer.imageshack.com/img922/5579/A2wdKh.png)
Botón #3
Código CSS
a {
text-decoration: none;
display:inline-block;
background-color: #000AAB;
padding:17px;
color: white;
font-family: Verdana;
font-weight: 800;
font-size: 25px;
border:3px solid #000;
}
a:hover {
color: #FFFFFF;
background-color: #0B16D1;
text-decoration: none;
}
En el código HTML solo cambié la url y el nombre a Facebook.
RESULTADO
(https://imagizer.imageshack.com/img923/7324/bwd30d.png) (https://imagizer.imageshack.com/img924/6356/yhyRxv.png)
APORTE
Para crear código más limpio podemos usar Bootstrap.
Es un framework muy usado y moderno que nos ayudara a escribir código mucho más limpio y cómodo.
- Descargarlo: https://getbootstrap.com/docs/4.5/getting-started/download/
Si prefieren enlazarlo sin necesidad de descargarlo, añaden a su HTML el siguiente código:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
Para JavaScript lo mismo (procuren hacerlo al final del body)
<script src
="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity
="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin
="anonymous"></script
>
Botones creados con Bootstrap con el hover ya establecido
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Botones</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style type="text/css">
body {
background: #ccc;
}
</style>
</head>
<body>
<button class="btn btn-primary mt-5 ml-3">BOTON-1</button>
<button class="btn btn-secondary mt-5 ml-3">BOTON-2</button>
<button class="btn btn-success mt-5 ml-3">BOTON-3</button>
<button class="btn btn-info mt-5 ml-3">BOTON-4</button>
<button class="btn btn-warning mt-5 ml-3">BOTON-5</button>
<button class="btn btn-danger mt-5 ml-3">BOTON-6</button>
<button class="btn btn-light mt-5 ml-3">BOTON-7</button>
<button class="btn btn-dark mt-5 ml-3">BOTON-8</button>
<hr>
<!--Crear un enlace en forma de botón-->
<a class="bt btn btn-success" href="#">ENLACE</a>
<input type="button" class="btn btn-warning" value="ACEPTAR">
</body>
</html>
(https://imagizer.imageshack.com/img924/9135/4j8awG.png)