How to Create Custom Shape Button using SVG ?

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.
<!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:
HTML-Misc
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
CSS to put icon inside an input element in a form
Types of CSS (Cascading Style Sheet)
Design a Tribute Page using HTML & CSS
HTTP headers | Content-Type
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array