Botones CSS: Dando
estilo a los botones
Los botones CSS son elementos interactivos en una página web que se pueden estilizar utilizando
estilos CSS para mejorar su apariencia y comportamiento.
Contenidos
5. Botones CSS
5.1. Cómo crear botones de tipo alert
5.2. Cómo crear botones de tipo outline
5.3. Cómo crear botones que ocupen el 100% del contenedor
5.4. Cómo crear un paginado con CSS
5.5. Cómo crear migas de pan con CSS
5.6. Cómo crear botones con iconos
5.7. Cómo crear botones con degradados
5.8. Cómo crear botones con efecto de pulsación
5.9. Cómo crear botones con efecto de sombra
EJEMPLO 1
HTML:
<button class="my-button">Haz clic aquí</button>
CSS:
.my-button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.my-button:hover {
background-color: #45a049;
}
.my-button:active {
background-color: #3e8e41;
}
En este ejemplo, hemos definido una clase .my-button que se
aplica al botón en el HTML. Utilizamos propiedades CSS
como padding , background-color , color , border , border-radius y curso
r para estilizar el botón. También hemos añadido estilos para el
estado :hover (cuando el cursor está sobre el botón)
y :active (cuando el botón está siendo clicado).
Puedes personalizar los estilos y agregar más efectos según tus
necesidades y preferencias. Los botones CSS ofrecen flexibilidad
para crear diseños únicos y atractivos en tus páginas web.
EJEMPLO 2
Veamos cómo crear botones de tipo alert, del mismo estilo que
los botones de BootStrap.
HTML:
<button class="btn primary">Primary</button>
<button class="btn secondary">Secondary</button>
<button class="btn success">Success</button>
<button class="btn warning">Warning</button>
<button class="btn danger">Danger</button>
CSS:
.btn {
border: none;
color: white;
padding: 14px 28px;
cursor: pointer;
border-radius: 5px;
}
.primary {background-color: #007bff;}
.primary:hover {background: #0b7dda;}
.secondary {background-color: #e7e7e7; color: black;}
.secondary:hover {background: #ddd;}
.success {background-color: #04AA6D;}
.success:hover {background-color: #46a049;}
.warning {background-color: #ff9800;}
.warning:hover {background: #e68a00;}
.danger {background-color: #f44336;}
.danger:hover {background: #da190b;}
EJEMPLO 3
5.2. Cómo crear botones de
tipo outline
Veamos cómo crear botones de tipo outline, del mismo estilo
que los botones de BootStra0
p.
HTML:
<button class="btn primary">Primary</button>
<button class="btn secondary">Secondary</button>
<button class="btn success">Success</button>
<button class="btn warning">Warning</button>
<button class="btn danger">Danger</button>
CSS:
.btn {
border: none;
color: black;
padding: 14px 28px;
cursor: pointer;
border-radius: 5px;
}
.primary {background-color: white; border: 2px solid #007bff;}
.primary:hover {background: #0b7dda; color: white;}
.secondary {background-color: white; border: 2px solid #e7e7e7;}
.secondary:hover {background: #ddd; color: white;}
.success {background-color: white; border: 2px solid #04AA6D;}
.success:hover {background-color: #46a049; color: white;}
.warning {background-color: white; border: 2px solid #ff9800;}
.warning:hover {background: #e68a00; color: white;}
.danger {background-color: white; border: 2px solid #f44336;}
.danger:hover {background: #da190b; color: white;}
5.3. Cómo crear botones que
ocupen el 100% del contenedor
Para que los botones ocupen el 100% de su contenedor
podemos agregarles la siguiente clase:
CSS:
.btn-block{
width: 100%;
display: block;
margin-bottom: 5px;
}
5.4. Cómo crear un paginado
con CSS
Crear un paginado en CSS implica utilizar estilos para diseñar los
elementos que formarán parte de la paginación, como los
botones de navegación y los números de página. A continuación
se muestra un ejemplo básico de cómo crear un paginado
simple utilizando CSS:
HTML:
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a class="active" href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">»</a></li>
</ul>
CSS:
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 9px 18px;
text-decoration: none;
ul.pagination li a.active {
background-color: #4CAF50;
color: white;
ul.pagination li a.active:hover {background-color: #397f3b;}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
