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.
<!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:
Share your thoughts in the comments
Please Login to comment...