Definiendo estilos para botones en diseño web

Vista previa del material en texto

botones
Botón regular
Botón con estilos
Propiedades
background-color
border
color
padding
margin
opacity
text-decoration
font-size
box-shadow
width
height
text-align
Selectores (estados)
	:link	*Normal (aplica solo para links, no botones)
	:visited	Cuando ya visitaste la url a donde envía el botón/link
	:hover	Cuando pasas el cursor encima
	:active	Activo (en la url a donde envía el bóton/link)
Estas propiedades se pueden añadir a cualquier link
Se establece el primer estado para todos y luego solo las propiedades que cambian en los otros
Añadir a una clase
	a:hover 	Se aplica a todos los hover en links de texto
	button:hover	Se aplica a todos los hover en botones
	a.clase1:hover 	Se aplica a todos los hover en links que tengan la clase1 
	button.clase1:hover 	Se aplica a todos los hover en botones que tengan la clase1 
Algunos ejemplos:
Cambiar el cursor
	Propiedad	Algunos valores	
	cursor	auto
default
none
copy
move
no-drop
not-allowed
all-scroll
col-resize
e-resize	help
context-menu
pointer
progress
wait
cell
crosshair
text
vertical-text
alias
Ejemplo de botón
.button {
background-color: green;
boder: 2px solid green;
boder-radius: 5px;
color: #ffffff;
}
.button:hover {
background-color: #4CAF50;
cursor: not-allowed;
}
1. Se establece el primer estado
2. Se especifican las propiedades que cambian en hover
Grupos de botones horizontales
.button {
float: left;
}
Grupos de botones verticales
.button {
display: block;
}