How to Create Custom Shape Button using SVG ?

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.