Para diseñar la forma de un botón HTML podemos utilizar elementos SVG (Scalable Vector Graphics). Básicamente define los gráficos basados en vectores en formato XML. Cada elemento y cada atributo en los archivos SVG se pueden animar. Podemos usar SVG para crear gráficos 2D de cualquier forma personalizada.
Ejemplo 1: este ejemplo crea un botón con forma de círculo usando SVG.
<!DOCTYPE html> <html> <head> <title> Create custom shape button </title> </head> <body> <h1 style="color:green;">GeeksforGeeks</h1> <h3>Circle Shape Button</h3> <svg width="500" height="500"> <a href="#"> <Circle cx="60" cy="60" r="50" stroke="black" fill="green" stroke-width="3"/> </a> </svg> </body> </html>
Producción:
Hay muchas más formas disponibles en elementos SVG como cuadros, texto, rectángulos, etc.
Ejemplo 2: este ejemplo crea un botón con forma de rectángulo usando SVG.
<!DOCTYPE html> <html> <head> <title> Rectangle Shape Button </title> </head> <body> <h1 style="color:green;">GeeksforGeeks</h1> <h3>Rectangle Shape Button</h3> <svg width="300" height="200"> <a href="#"> <rect width="250" height="150" style="fill:rgb(0, 255, 0); stroke-width:5;stroke:rgb(0, 0, 0)" /> </a> </svg> </body> </html>
Producción:
Ejemplo 3: este ejemplo crea un botón con forma de estrella usando SVG.
<!DOCTYPE html> <html> <head> <title> Star Shape Button </title> </head> <body> <h1 style="color:green;">GeeksforGeeks</h1> <h3>Star Shape Button</h3> <a href="#"> <svg width="300" height="200"> <polygon points="100, 10 40, 198 190, 78 10, 78 160, 198" style="fill:green; stroke:black; stroke-width:5; fill-rule:evenodd;" /> </svg> </a> </body> </html>
Producción:
Ejemplo 4: este ejemplo crea un botón con forma de bandera usando SVG.
<!DOCTYPE html> <html> <head> <title> Flag Shape Button </title> </head> <body> <h1 style="color:green;">GeeksforGeeks</h1> <h3>Flag Shape Button</h3> <svg width="240" height="240"> <a href="#"> <path d="M 0 0 L 120 0 L 120 120 L 60 80 L 0 120 Z" fill="green"/> <text x="60" y="50" fill="#FFFFFF" text-anchor="middle" alignment-baseline="middle"> GeeksforGeeks. </text> </a> </svg> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por cybercreed010 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA