⇧ Top

Os botões são representados por classe (.class)

No caso de ícone apresentado e se for link a classe é posicionado entre as TAGs

Se não for ícone apresentado e se for link a classe é posicionado dentro da TAG.

Se for botões, em ambas situacões é posicionado dentro da TAG.

Link para usar: https://jpm-development.com/css/button/info/styles.css

LINKs PEQUENOs RETANGULAREs
Visualizar	Codigo	Codigo completo
Save	a-rect-info-t0	<a href="#" class="a-rect-info-t0">Save</a>
Save	a-rect-info-t0-block	<a href="#" class="a-rect-info-t0-block">Save</a>
	<i class="a-rect-info-t0-trash"></i>	<a href="#"><i class="a-rect-info-t0-trash"></i></a>
	<i class="a-rect-info-t0-like"></i>	<a href="#"><i class="a-rect-info-t0-like"></i></a>
	<i class="a-rect-info-t0-dislike"></i>	<a href="#"><i class="a-rect-info-t0-dislike"></i></a>
	<i class="a-rect-info-t0-edit"></i>	<a href="#"><i class="a-rect-info-t0-edit"></i></a>
	<i class="a-rect-info-t0-register"></i>	<a href="#"><i class="a-rect-info-t0-register"></i></a>
	<i class="a-rect-info-t0-eye"></i>	<a href="#"><i class="a-rect-info-t0-eye"></i></a>
	<i class="a-rect-info-t0-contact"></i>	<a href="#"><i class="a-rect-info-t0-contact"></i></a>
	<i class="a-rect-info-t0-cart"></i>	<a href="#"><i class="a-rect-info-t0-cart"></i></a>
	<i class="a-rect-info-t0-facebook"></i>	<a href="#"><i class="a-rect-info-t0-facebook"></i></a>
	<i class="a-rect-info-t0-back"></i>	<a href="#"><i class="a-rect-info-t0-back"></i></a>
	<i class="a-rect-info-t0-next"></i>	<a href="#"><i class="a-rect-info-t0-next"></i></a>
	<i class="a-rect-info-t0-instagram"></i>	<a href="#"><i class="a-rect-info-t0-instagram"></i></a>
	<i class="a-rect-info-t0-arrow_down"></i>	<a href="#"><i class="a-rect-info-t0-arrow_down"></i></a>
	<i class="a-rect-info-t0-arrow_up"></i>	<a href="#"><i class="a-rect-info-t0-arrow_up"></i></a>

LINKs PEQUENOs CIRCULAREs
Visualizar	Codigo	Codigo completo
Save	a-circ-info-t0	<a href="#" class="a-circ-info-t0">Save</a>
	<i class="a-circ-info-t0-trash"></i>	<a href="#"><i class="a-circ-info-t0-trash"></i></a>
	<i class="a-circ-info-t0-like"></i>	<a href="#"><i class="a-circ-info-t0-like"></i></a>
	<i class="a-circ-info-t0-dislike"></i>	<a href="#"><i class="a-circ-info-t0-dislike"></i></a>
	<i class="a-circ-info-t0-edit"></i>	<a href="#"><i class="a-circ-info-t0-edit"></i></a>
	<i class="a-circ-info-t0-register"></i>	<a href="#"><i class="a-circ-info-t0-register"></i></a>
	<i class="a-circ-info-t0-eye"></i>	<a href="#"><i class="a-circ-info-t0-eye"></i></a>
	<i class="a-circ-info-t0-contact"></i>	<a href="#"><i class="a-circ-info-t0-contact"></i></a>
	<i class="a-circ-info-t0-cart"></i>	<a href="#"><i class="a-circ-info-t0-cart"></i></a>
	<i class="a-circ-info-t0-facebook"></i>	<a href="#"><i class="a-circ-info-t0-facebook"></i></a>
	<i class="a-circ-info-t0-back"></i>	<a href="#"><i class="a-circ-info-t0-back"></i></a>
	<i class="a-circ-info-t0-next"></i>	<a href="#"><i class="a-circ-info-t0-next"></i></a>
	<i class="a-circ-info-t0-instagram"></i>	<a href="#"><i class="a-circ-info-t0-instagram"></i></a>
	<i class="a-circ-info-t0-arrow_down"></i>	<a href="#"><i class="a-circ-info-t0-arrow_down"></i></a>
	<i class="a-circ-info-t0-arrow_up"></i>	<a href="#"><i class="a-circ-info-t0-arrow_up"></i></a>

BOTÕES PEQUENOS RETANGULAR
Visualizar	Codigo	Codigo completo
Save	btn-rect-info-t0	<button class="btn-rect-info-t0"></button>
Save	btn-rect-info-t0-block	<button class="btn-rect-info-t0-block"></button>
	btn-rect-info-t0-trash	<button class="btn-rect-info-t0-trash"></button>
	btn-rect-info-t0-like	<button class="btn-rect-info-t0-like"></button>
	btn-rect-info-t0-dislike	<button class="btn-rect-info-t0-dislike"></button>
	btn-rect-info-t0-edit	<button class="btn-rect-info-t0-edit"></button>
	btn-rect-info-t0-register	<button class="btn-rect-info-t0-register"></button>
	btn-rect-info-t0-eye	<button class="btn-rect-info-t0-eye"></button>
	btn-rect-info-t0-contact	<button class="btn-rect-info-t0-contact"></button>
	btn-rect-info-t0-cart	<button class="btn-rect-info-t0-cart"></button>
	btn-rect-info-t0-facebook	<button class="btn-rect-info-t0-facebook"></button>
	btn-rect-info-t0-back	<button class="btn-rect-info-t0-back"></button>
	btn-rect-info-t0-next	<button class="btn-rect-info-t0-next"></button>
	btn-rect-info-t0-instagram	<button class="btn-rect-info-t0-instagram"></button>

BOTÕES PEQUENOS CIRCULARES
Visualizar	Codigo	Codigo completo
Save	btn-circ-info-t0	<button class="btn-circ-info-t0"></button>
	btn-circ-info-t0-trash	<button class="btn-circ-info-t0-trash"></button>
	btn-circ-info-t0-like	<button class="btn-circ-info-t0-like"></button>
	btn-circ-info-t0-dislike	<button class="btn-circ-info-t0-dislike"></button>
	btn-circ-info-t0-edit	<button class="btn-circ-info-t0-edit"></button>
	btn-circ-info-t0-register	<button class="btn-circ-info-t0-register"></button>
	btn-circ-info-t0-eye	<button class="btn-circ-info-t0-eye"></button>
	btn-circ-info-t0-contact	<button class="btn-circ-info-t0-contact"></button>
	btn-circ-info-t0-cart	<button class="btn-circ-info-t0-cart"></button>
	btn-circ-info-t0-facebook	<button class="btn-circ-info-t0-facebook"></button>
	btn-circ-info-t0-back	<button class="btn-circ-info-t0-back"></button>
	btn-circ-info-t0-next	<button class="btn-circ-info-t0-next"></button>
	btn-circ-info-t0-instagram	<button class="btn-circ-info-t0-instagram"></button>

LINKs MEDIO RETANGULAREs
Visualizar	Codigo	Codigo completo
Save	a-rect-info-t1	<a href="#" class="a-rect-info-t1">Save</a>
Save	a-rect-info-t1-block	<a href="#" class="a-rect-info-t1-block">Save</a>
	<i class="a-rect-info-t1-trash"></i>	<a href="#"><i class="a-rect-info-t1-trash"></i></a>
	<i class="-rect-info-t1-like"></i>	<a href="#"><i class="a-rect-info-t1-like"></i></a>
	<i class="a-rect-info-t1-dislike"></i>	<a href="#"><i class="a-rect-info-t1-dislike"></i></a>
	<i class="a-rect-info-t1-edit"></i>	<a href="#"><i class="a-rect-info-t1-edit"></i></a>
	<i class="a-rect-info-t1-register"></i>	<a href="#"><i class="a-rect-info-t1-register"></i></a>
	<i class="a-rect-info-t1-eye"></i>	<a href="#"><i class="a-rect-info-t1-eye"></i></a>
	<i class="a-rect-info-t1-contact"></i>	<a href="#"><i class="a-rect-info-t1-contact"></i></a>
	<i class="a-rect-info-t1-cart"></i>	<a href="#"><i class="a-rect-info-t1-cart"></i></a>
	<i class="a-rect-info-t1-facebook"></i>	<a href="#"><i class="a-rect-info-t1-facebook"></i></a>
	<i class="a-rect-info-t1-back"></i>	<a href="#"><i class="a-rect-info-t1-back"></i></a>
	<i class="a-rect-info-t1-next"></i>	<a href="#"><i class="a-rect-info-t1-next"></i></a>
	<i class="a-rect-info-t1-instagram"></i>	<a href="#"><i class="a-rect-info-t1-instagram"></i></a>

LINKs MEDIOs CIRCULAREs
Visualizar	Codigo	Codigo completo
Save	a-circ-info-t1	<a href="#" class="a-circ-info-t1">Save</a>
	<i class="a-circ-info-t1-trash"></i>	<a href="#"><i class="a-circ-info-t1-trash"></i></a>
	<i class="a-circ-info-t1-like"></i>	<a href="#"><i class="a-circ-info-t1-like"></i></a>
	<i class="a-circ-info-t1-dislike"></i>	<a href="#"><i class="a-circ-info-t1-dislike"></i></a>
	<i class="a-circ-info-t1-edit"></i>	<a href="#"><i class="a-circ-info-t1-edit"></i></a>
	<i class="a-circ-info-t1-register"></i>	<a href="#"><i class="a-circ-info-t1-register"></i></a>
	<i class="a-circ-info-t1-eye"></i>	<a href="#"><i class="a-circ-info-t1-eye"></i></a>
	<i class="a-circ-info-t1-contact"></i>	<a href="#"><i class="a-circ-info-t1-contact"></i></a>
	<i class="a-circ-info-t1-cart"></i>	<a href="#"><i class="a-circ-info-t1-cart"></i></a>
	<i class="a-circ-info-t1-facebook"></i>	<a href="#"><i class="a-circ-info-t1-facebook"></i></a>
	<i class="a-circ-info-t1-back"></i>	<a href="#"><i class="a-circ-info-t1-back"></i></a>
	<i class="a-circ-info-t1-next"></i>	<a href="#"><i class="a-circ-info-t1-next"></i></a>
	<i class="a-circ-info-t1-instagram"></i>	<a href="#"><i class="a-circ-info-t1-instagram"></i></a>

BTNs MEDIOs RETANGULAREs
Visualizar	Codigo	Codigo completo
Save	btn-rect-info-t1	<button class="btn-rect-info-t1"></button>
Save	btn-rect-info-t1-block	<button class="btn-rect-info-t1-block"></button>
	btn-rect-info-t1-trash	<button class="btn-rect-info-t1-trash"></button>
	btn-rect-info-t1-like	<button class="btn-rect-info-t1-like"></button>
	btn-rect-info-t1-dislike	<button class="btn-rect-info-t1-dislike"></button>
	btn-rect-info-t1-edit	<button class="btn-rect-info-t1-edit"></button>
	btn-rect-info-t1-register	<button class="btn-rect-info-t1-register"></button>
	btn-rect-info-t1-eye	<button class="btn-rect-info-t1-eye"></button>
	btn-rect-info-t1-contact	<button class="btn-rect-info-t1-contact"></button>
	btn-rect-info-t1-cart	<button class="btn-rect-info-t1-cart"></button>
	btn-rect-info-t1-facebook	<button class="btn-rect-info-t1-facebook"></button>
	btn-rect-info-t1-back	<button class="btn-rect-info-t1-back"></button>
	btn-rect-info-t1-next	<button class="btn-rect-info-t1-next"></button>
	btn-rect-info-t1-instagram	<button class="btn-rect-info-t1-instagram"></button>

BTNs MEDIOs CIRCULARESs
Visualizar	Codigo	Codigo completo
Save	btn-circ-info-t1	<button class="btn-circ-info-t1"></button>
	btn-circ-info-t1-trash	<button class="btn-circ-info-t1-trash"></button>
	btn-circ-info-t1-like	<button class="btn-circ-info-t1-like"></button>
	btn-circ-info-t1-dislike	<button class="btn-circ-info-t1-dislike"></button>
	btn-circ-info-t1-edit	<button class="btn-circ-info-t1-edit"></button>
	btn-circ-info-t1-register	<button class="btn-circ-info-t1-register"></button>
	btn-circ-info-t1-eye	<button class="btn-circ-info-t1-eye"></button>
	btn-circ-info-t1-contact	<button class="btn-circ-info-t1-contact"></button>
	btn-circ-info-t1-cart	<button class="btn-circ-info-t1-cart"></button>
	btn-circ-info-t1-facebook	<button class="btn-circ-info-t1-facebook"></button>
	btn-circ-info-t1-back	<button class="btn-circ-info-t1-back"></button>
	btn-circ-info-t1-next	<button class="btn-circ-info-t1-next"></button>
	btn-circ-info-t1-instagram	<button class="btn-circ-info-t1-instagram"></button>

LINKs GRANDEs RETANGULAREs
Visualizar	Codigo	Codigo completo
Save	a-rect-info-t2	<a href="#" class="a-rect-info-t2">Save</a>
Save	a-rect-info-t2-block	<a href="#" class="a-rect-info-t2-block">Save</a>
	<i class="a-rect-info-t2-trash"></i>	<a href="#"><i class="a-rect-info-t2-trash"></i></a>
	<i class="a-rect-info-t2-like"></i>	<a href="#"><i class="a-rect-info-t2-like"></i></a>
	<i class="a-rect-info-t2-dislike"></i>	<a href="#"><i class="a-rect-info-t2-dislike"></i></a>
	<i class="a-rect-info-t2-edit"></i>	<a href="#"><i class="a-rect-info-t2-edit"></i></a>
	<i class="a-rect-info-t2-register"></i>	<a href="#"><i class="a-rect-info-t2-register"></i></a>
	<i class="a-rect-info-t2-eye"></i>	<a href="#"><i class="a-rect-info-t2-eye"></i></a>
	<i class="a-rect-info-t2-contact"></i>	<a href="#"><i class="a-rect-info-t2-contact"></i></a>
	<i class="a-rect-info-t2-cart"></i>	<a href="#"><i class="a-rect-info-t2-cart"></i></a>
	<i class="a-rect-info-t2-facebook"></i>	<a href="#"><i class="a-rect-info-t2-facebook"></i></a>
	<i class="a-rect-info-t2-back"></i>	<a href="#"><i class="a-rect-info-t2-back"></i></a>
	<i class="a-rect-info-t2-next"></i>	<a href="#"><i class="a-rect-info-t2-next"></i></a>
	<i class="a-rect-info-t2-instagram"></i>	<a href="#"><i class="a-rect-info-t2-instagram"></i></a>

LINKs GRANDEs CIRCULAREs
Visualizar	Codigo	Codigo completo
Save	a-circ-info-t2	<a href="#" class="a-circ-info-t2">Save</a>
	<i class="a-circ-info-t2-trash"></i>	<a href="#"><i class="a-circ-info-t2-trash"></i></a>
	<i class="a-circ-info-t2-like"></i>	<a href="#"><i class="a-circ-info-t2-like"></i></a>
	<i class="a-circ-info-t2-dislike"></i>	<a href="#"><i class="a-circ-info-t2-dislike"></i></a>
	<i class="a-circ-info-t2-edit"></i>	<a href="#"><i class="a-circ-info-t2-edit"></i></a>
	<i class="a-circ-info-t2-register"></i>	<a href="#"><i class="a-circ-info-t2-register"></i></a>
	<i class="a-circ-info-t2-eye"></i>	<a href="#"><i class="a-circ-info-t2-eye"></i></a>
	<i class="a-circ-info-t2-contact"></i>	<a href="#"><i class="a-circ-info-t2-contact"></i></a>
	<i class="a-circ-info-t2-cart"></i>	<a href="#"><i class="a-circ-info-t2-cart"></i></a>
	<i class="a-circ-info-t2-facebook"></i>	<a href="#"><i class="a-circ-info-t2-facebook"></i></a>
	<i class="a-circ-info-t2-back"></i>	<a href="#"><i class="a-circ-info-t2-back"></i></a>
	<i class="a-circ-info-t2-next"></i>	<a href="#"><i class="a-circ-info-t2-next"></i></a>
	<i class="a-circ-info-t2-instagram"></i>	<a href="#"><i class="a-circ-info-t2-instagram"></i></a>

BTNs GRANDEs RETANGULAREs
Visualizar	Codigo	Codigo completo
Save	btn-rect-info-t2	<button class="btn-rect-info-t2"></button>
Save	btn-rect-info-t2-block	<button class="btn-rect-info-t2-block"></button>
	btn-rect-info-t2-trash	<button class="btn-rect-info-t2-trash"></button>
	btn-rect-info-t2-like	<button class="btn-rect-info-t2-like"></button>
	btn-rect-info-t2-dislike	<button class="btn-rect-info-t2-dislike"></button>
	btn-rect-info-t2-edit	<button class="btn-rect-info-t2-edit"></button>
	btn-rect-info-t2-register	<button class="btn-rect-info-t2-register"></button>
	btn-rect-info-t2-eye	<button class="btn-rect-info-t2-eye"></button>
	btn-rect-info-t2-contact	<button class="btn-rect-info-t2-contact"></button>
	btn-rect-info-t2-cart	<button class="btn-rect-info-t2-cart"></button>
	btn-rect-info-t2-facebook	<button class="btn-rect-info-t2-facebook"></button>
	btn-rect-info-t2-back	<button class="btn-rect-info-t2-back"></button>
	btn-rect-info-t2-next	<button class="btn-rect-info-t2-next"></button>
	btn-rect-info-t2-instagram	<button class="btn-rect-info-t2-instagram"></button>

BTNs GRANDEs CIRCULAREs
Visualizar	Codigo	Codigo completo
Save	btn-circ-info-t2	<button class="btn-circ-info-t2"></button>
	btn-circ-info-t2-trash	<button class="btn-circ-info-t2-trash"></button>
	btn-circ-info-t2-like	<button class="btn-circ-info-t2-like"></button>
	btn-circ-info-t2-dislike	<button class="btn-circ-info-t2-dislike"></button>
	btn-circ-info-t2-edit	<button class="btn-circ-info-t2-edit"></button>
	btn-circ-info-t2-register	<button class="btn-circ-info-t2-register"></button>
	btn-circ-info-t2-eye	<button class="btn-circ-info-t2-eye"></button>
	btn-circ-info-t2-contact	<button class="btn-circ-info-t2-contact"></button>
	btn-circ-info-t2-cart	<button class="btn-circ-info-t2-cart"></button>
	btn-circ-info-t2-facebook	<button class="btn-circ-info-t2-facebook"></button>
	btn-circ-info-t2-back	<button class="btn-circ-info-t2-back"></button>
	btn-circ-info-t2-next	<button class="btn-circ-info-t2-next"></button>
	btn-circ-info-t2-instagram	<button class="btn-circ-info-t2-instagram"></button>