Botones CSS: uso de bttn.css
La biblioteca bttn.css proporciona una enorme colección de estilos simples para botones. Esta biblioteca es completamente gratuita para uso personal y comercial. Estos botones se pueden personalizar fácilmente.
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 = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>Usando el botón
Cree un botón usando la etiqueta de botón html y agregue los estilos bttn-slant, bttn-royal con el especificador de tamaño bttn-lg.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>
<body>
<button class = "bttn-slant">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 = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>
<body>
<button class = "bttn-pill bttn-lg">Large</button>
<button class = "bttn-pill bttn-md">Medium</button>
<button class = "bttn-pill bttn-sm">Small</button>
<button class = "bttn-pill bttn-xs">Extra 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 = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>
<body>
<button class = "bttn-pill bttn-lg bttn-primary">Primary</button>
<button class = "bttn-pill bttn-md bttn-warning">Warning</button>
<button class = "bttn-pill bttn-sm bttn-danger">Danger</button>
<button class = "bttn-pill bttn-xs bttn-success">Success</button>
<button class = "bttn-pill bttn-xs bttn-royal">Royal</button>
</body>
</html>Producirá la siguiente salida: