How to Create Custom Shape Button using SVG ?

Last Updated : 27 Apr, 2020

To design the shape of an HTML button we can use SVG elements (Scalable Vector Graphics). It basically defines the vector-based graphics in XML format. Every element and every attribute in SVG files can be animated. We can use SVG to create 2-D graphics of any custom shape. Example 1: This example creating a circle shape button using SVG.

html

<!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>

Output:

There are many more shapes available in SVG elements such as boxes, text, rectangles, etc. Example 2: This example creating a rectangle shape button using SVG.

HTML

<!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>

Output:

Example 3: This example creating a star shape button using SVG.

html

<!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>

Output:

Example 4: This example creating a flag shape button using SVG.

html

<!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>

Output:

Create a Button Group using HTML and CSS

cybercreed010

Improve

Article Tags :

How to Create Custom Shape Button using SVG ?

Similar Reads

Thank You!

What kind of Experience do you want to share?