Crear botó amb css i html

Procés per a crear un botó en 2 passos: estructura HTML i estils amb CSS.

Pas 1: Creem l’estructura HTML per al botó

Tècnicament un botó en desenvolupament web no és més que un enllaç bonic. Així que seguim aquests passos:

1. Abans de tot, accedim a l’editor d’entrada o pàgina on volem inserir el botó i anem a la pestanya HTML, no Visual.

2. El primer seria crear un enllaç amb certes característiques. Comencem posant el text del botó (per exemple “Visita la meua pàgina”) entre les etiquetes d’enllaç .

3. Li donem un ID a l’enllaç per a poder estilitzar-lo amb CSS després. L’ID podria ser “boto-bonic” per exemple i ho farem posant id=”boto-bonic” dins de la primera etiqueta.

4. Indiquem la destinació del botó. És a dir, on ens portarà, amb href=”https://…”. Quedaria així:

<a id="boto-bonic" href="https://sasogu.es">Visita la meua pàgina</a>

I ja hem acabat amb HTML. Com veieu no té molta complicació. ara passem al CSS.

Pas 2: Estilitzem el botó amb CSS

CSS ens servirà per a donar estils al nostre enllaç i deixar-lo més bonic. Fa poc vaig escriure un article sobre diferents mètodes d’afegir i modificar el CSS en WordPress així que pots consultar-ho si et fa falta. Així que ara accedirem a la nostra forma favorita d’afegir CSS i seguirem amb el disseny.

#boto-bonic {
text-decoration:none;
color:white;
padding:20px;
background-color:#dd9933;
}

El que farà aquest codi, en aquest mateix ordre, és:

  • Llevar-li qualsevol decoració al text de l’enllaç
  • Donar-li un color blanc al text del botó
  • Crear espai de 20px entre el text i les vores
  • Donar-li un color de fons taronja al botó

A més, perquè el botó tinga un efecte quan passem el ratolí per damunt, podem utilitzar l’etiqueta :hover i ens quedaria una cosa així:

#boton-bonic:hover {
background-color:#333333;
}

D’aquesta manera el color de fons del botó continuarà sent taronja, però quan es passe el botó per damunt, es tornarà negre.

Per ficar codi CSS més complicat https://cssgradientbutton.com/

Feu un comentari

"edutictac.es