Botones
Unos botones personalizados para utilizar en diferentes estados o acciones y, disponibles en diferentes tamaños.
-- Botones colores ligeros
-- Botones básicos - outline
HTML
-- Botones colores sólidos
-- Tamaños de botones
HTML
HTML -
Otros modos de uso
-- Botones en grupo (fila)
HTML
-- Botones en grupo (columna)
HTML
Utilidades para botones agrupados
-- Puntos de corte: de button-group-row a button-group-column
| Clases | Media Query |
|---|---|
| .pho-button-group-column | @media screen (min-width: 550px). |
| .pha-button-group-column | @media screen (min-width: 770px). |
| .tab-button-group-column | @media screen (min-width: 990px). |
| .lap-button-group-column | @media screen (min-width: 1200px). |
-- Uso
HTML
Iconos de dirección
HTML
-- Iconos CSS
| Clase | Utilidad |
|---|---|
| .caret-down | |
| .caret-left | |
| .caret-right | |
| .caret-up |
-- Enlaces
HTML
link style opacity
HTML
link style hover
HTML
link style
HTML
link disabled
HTML (Color sobre fondo oscuro)
link light color-- Grupo de enlaces
-
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae quasi magnam ut dignissimos cum culpa totam consequuntur, minus quidem rerum?
- Link 02
- Link 03
HTML
-- Clase .link-style y .bttn combinadas
Ejemplo de uso
HTML
-
-
Botones checkboxes
-- Botones checkboxes por defecto
HTML
-- Botones checkboxes por defecto (columna)
HTML
-- Botones combinación de colores
HTML
-- Botones expandidos en ancho
HTML
-- Botones: Uso junto a otros elementos de formulario
HTML
-- Botones: Otros usos
HTML
-- Puntos de corte: de button-group-row a button-group-column
Por defecto los botones agrupados en filas no tienen un punto de irrupción para que se ajusten en columnas y de esta forma adptarse a los dispositivos móviles. Si crees que puedes necesitar un punto de ruptura para que un conjunto de botones se agrupen en columnas, puedes hacer uso de las siguientes clases:
- lap-button-group-column
- tab-button-group-column
- pha-button-group-column
- pho-button-group-column
-- Uso
HTML
-- Botón de menú
-- Utilidades para el botón de menú
| Clase | Descripción |
|---|---|
| .bttn-menu | Contiene los estilos y realiza el efecto asignado al botón al hacer click. |
| .bttn-menu-white | Añade color blanco a las líneas. |
| .bttn-menu-black | Añade color negro a las líneas. |
HTML
Iconos SVG
-- Icono barra de navegación
HTML
-- Icono de cierre
HTML
-- Ejemplo de propiedades CSS para los iconos SVG
CSS
.icon-close {
width: ...;
height: ...;
display: inline-block;
vertical-align: middle;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3csvg ...) center/cover;
mask: url("data:image/svg+xml;charset=UTF-8,%3csvg ...) center/cover;
opacity: .7;
&:hover {
opacity: 1;
}
}
Paginación
-- Paginación (estilo 1)
HTML
-- Paginación (estilo 2)
HTML