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.
<!DOCTYPE html> < html > < head > < title > Create custom shape button </ title > </ head > < body > < h1 style = "color:green;" >w3wiki</ 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;" >w3wiki</ 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;" >w3wiki</ 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;" >w3wiki</ 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" > w3wiki. </ text > </ a > </ svg > </ body > </ html > |
Output: