Com fer un botó en HTML funcional i amb estil

crear un botó en html amb estil

Hi ha ocasions en què, a l'hora de dissenyar webs, saber com fer un botó HTML t'ajuda molt. Sobretot perquè pots crear un disseny de ser funcional i elegant, que es faci impossible no estrènyer-i que obtinguis resultats favorits per a la teva pàgina web.

A el marge que el sistema HTML ja no està de moda, la veritat és que en programació has de saber d'aquest per crear enllaços a botons HTML que quedin perfectes per a webs, blocs i fins i tot per a la teva pàgina de marca. Però, saps com fer un botó HTML funcional i amb estil? Et diem com fer-ho.

Passos per crear un botó HTML

Passos per crear un botó HTML

Volem ajudar-te a la teva web, blog ... i per això un dels coneixements que has de tenir i que a més és molt fàcil d'aprendre és el codi HTML. Aquest et permet canviar una gran quantitat de coses en el disseny de la teva pàgina. Un dels elements fonamentals són els botons, perquè aquests es vinculen amb links per dur a l'usuari a altres llocs de la teva pàgina o fora d'ells. Però, saps com es fa?

Els passos fonamentals són els següents:

Crear l'estructura bàsica

Tot botó HTML té la mateixa estructura. Es compon d'un codi que serà sempre el mateix, però que canvia respecte al que es vulgui posar o enllaçar. Un senzill seria:

El meu botó

Ara bé, això només aconseguirà que tinguem un enllaç, sense més, però no es veurà amb el disseny d'un botó (tret que tinguis formularis i un d'ells sigui per crear botons).

Com fer que es vegi així? T'ho expliquem.

Afegir atributs de botó

Perquè un botó HTML sigui funcional i cridaner, cal donar-li la forma de botó. Per això, a l'hora de crear-lo, has de tenir en compte que es van a personalitzar alguns elements. Així, aquest primer codi, ja personalitzat, quedaria així:

El meu botó

Donar-li color, mida ...

Finalment, en aquest mateix codi també pots aplicar una línia d'estil (style) per determinar la mida de el botó, de la font de lletra, el color de botó sense passar el ratolí i passant-ho, etc.

L'etiqueta BUTTON en HTML

llenguatge html

Si el que vols és crear botons més personalitzats, llavors el que busques és utilitzar aquesta etiqueta que, si bé té molts avantatges, també té inconvenients. Però en general, pot servir-te per a un ús bàsic i original.

L'etiqueta button, com és habitual en codi HTML, té una obertura i un tancament. És a dir, la seva obertura seria mentre que el tancament seria. Entre elles és on s'introdueix tota la informació d'aquest botó. L'avantatge d'aquest enfront de l'altre que hem vist és que aquest botó et permet no només posar un enllaç, sinó molt més, com imatges, negretes, salts de línia ... en definitiva, tot el que necessitis.

Atributs de l'etiqueta BUTTON

Quins atributs podríem posar-li a el botó? Doncs en concret:

  • Name: és el nom que podem donar-li a el botó. D'aquesta manera s'identifiquen els botons, sobretot quan tens diversos.
  • Type: classifica el botó que facis. En realitat, pots crear molts tipus de botons, des d'un normal a un botó per resetejar un formulari, per enviar dades, etc.
  • Value: relacionat amb l'anterior, serveix per especificar el valor d'aquest botó.
  • Disabled: si ho marques, faràs que el botó es desactivi, de manera que no funcionarà.

Com crear un botó HTML en línia

Com crear un botó HTML en línia

Si no vols quebrarte molt el cap a l'hora de crear un botó HTML i prefereixes buscar ajuda a través de webs a Internet que et facin el botó per tu, o al menys que et permetin obtenir el codi per copiar al teu bloc, web o en el lloc on vulguis, hi ha opcions. I és que hi ha diverses webs que et van a ajudar-hi, bé obtenint un botó més bàsic o un més senzill.

Entre elles et recomanem:

King Button Maker

És bastant avançada, sobretot perquè et deixa canviar pràcticament tots els botons de botó. A més, et proporciona una preview perquè vas com va quedant i puguis personalitzar tot basant-se el lloc on vagis a inserir el botó.

A la fin, a el donar-li a el botó Grab the code, t'apareixerà el codi HTML i també el CSS. Recordeu-vos de adjuntar els dos perquè t'ajudarà a que mantingui el disseny que li hagis demanat.

Dóna button factory

Aquesta és una de les millors webs per a crear botons HTML, sobretot si l'objectiu que vols donar-li és una «crida a l'acció». Per a això, pots personalitzar el fons de el botó, l'estil, font, ombrejat, mida i altres parts del mateix.

Després et deixa descarregar el botó com a imatge PNG, però també pots incrustar a la teva web.

Call to Action button generator

Aquí només et dóna dues opcions, bé descarregar tipus PNG o bé amb el CSS. Té l'avantatge que pots personalitzar el color de fons, el text de el botó amb la seva font i color, així com la vora, mida i colors d'altres detalls.

Botons

Aquesta eina és una de les més completes que pots utilitzar. La pots fer servir gratis i obtindràs dissenys de qualitat, A més de moderns.

Creador de botons

Aquesta eina també és de les que més et va a permetre personalitzar els botons, sobretot la zona de les vores, ombres, si el text va centrat, justificat, etc.

ImageFu

Si el que busques és crear botons amb diverses línies de text, aquesta eina és una de les millors. No només té moltes formes de personalitzar el botó, sinó que també podràs fer botons més grans o estilosos.

Generador de botons gràfics efecte Hover

Aquesta eina et permet crear botons que, a el passar el punter sobre ells, canviï. A més, et permet tenir el codi HTML per poder usar-lo, tot i que has de pujar el botó final de l'resultat perquè quedi tal qual vegis en la prèvia.

A l'hora de fer un botó HTML la millor recomanació que podem donar-te és que provis diverses opcions ja que, d'aquesta manera, vas a aconseguir el resultat que esperes. No et quedis només amb el primer que et mostris, de vegades innovar o dedicar més temps t'ajudarà a que quedi molt millor. Has fet un botó d'aquests alguna vegada?


Sigues el primer a comentar

Deixa el teu comentari

La seva adreça de correu electrònic no es publicarà. Els camps obligatoris estan marcats amb *

*

*

  1. Responsable de les dades: Miguel Ángel Gatón
  2. Finalitat de les dades: Controlar l'SPAM, gestió de comentaris.
  3. Legitimació: El teu consentiment
  4. Comunicació de les dades: No es comunicaran les dades a tercers excepte per obligació legal.
  5. Emmagatzematge de les dades: Base de dades allotjada en Occentus Networks (UE)
  6. Drets: En qualsevol moment pots limitar, recuperar i esborrar la teva informació.