¿Cómo crear un botón de forma personalizada usando SVG?

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

Deja una respuesta Cancelar la respuesta