Open In App

How to Create Custom Shape Button using SVG ?

Improve
Improve
Like Article
Like
Save
Share
Report

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.




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




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




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




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



Last Updated : 27 Apr, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads