Botones CSS: uso de btns.css
La biblioteca de botones btns.css es un conjunto de botones CSS que hacen uso de transiciones suaves.
Cargando el bttn.css
Para cargar la biblioteca btns.css, vaya al enlace btns.css y pegue la siguiente línea en la sección <head> de la página web.
<head>
<link rel = "stylesheet" href = "btns.css">
</head>Usando el botón
Cree un botón usando la etiqueta de botón html y agregue estilos btn, btn-blue con el especificador de tamaño btn-lg.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/btns.css">
</head>
<body>
<button class = "btn btn-blue">Submit</button>
</body>
</html>Producirá la siguiente salida:
Definiendo el tamaño
Puede aumentar o disminuir el tamaño de un botón definiendo su tamaño usando CSS y usándolo junto con el nombre de la clase, como se muestra a continuación. En el ejemplo dado, tenemos cambios de cuatro tamaños.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/btns.css">
</head>
<body>
<button class = "btn btn-lg btn-blue">Large</button>
<button class = "btn btn-sm btn-blue">Small</button>
</body>
</html>Producirá la siguiente salida:
Definiendo el color
Al igual que el tamaño, puede definir el color del botón mediante CSS. El siguiente ejemplo muestra cómo cambiar el color del botón.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/btns.css">
</head>
<body>
<button class = "btn btn-lg btn-red">Red</button>
<button class = "btn btn-lg btn-blue">Blue</button>
<button class = "btn btn-lg btn-green">Green</button>
<button class = "btn btn-lg btn-sea">Sea</button>
<button class = "btn btn-lg btn-yellow">Yellow</button>
<button class = "btn btn-lg btn-orange">Orange</button>
<button class = "btn btn-lg btn-purple">Purple</button>
<button class = "btn btn-lg btn-black">Black</button>
<button class = "btn btn-lg btn-cloud">Cloud</button>
<button class = "btn btn-lg btn-grey">Grey</button>
</body>
</html>Producirá la siguiente salida:
Definiendo el estilo
Al igual que el tamaño, el color, puede definir el estilo del botón usando CSS. El siguiente ejemplo muestra cómo cambiar el estilo del botón.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/btns.css">
</head>
<body>
<button class = "btn btn-lg btn-blue">Regular</button>
<button class = "btn btn-lg btn-blue btn-round">Round</button>
<button class = "btn btn-lg btn-blue btn-raised">Raised</button>
<button class = "btn btn-blue btn-sm">Small</button>
<button class = "btn btn-lg btn-outline-blue ">Outlined</button>
</body>
</html>Producirá la siguiente salida: