Button using SVG
How do I make an button using svg?
What is a button using svg? How do you make a button using svg? This script and codes were developed by Mohomed Anees on 27 August 2022, Saturday.
Button using SVG - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Button using SVG</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="btn-holder"> <button class="button">Final</button> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-5 0 255 80" style="enable-background:new -5 0 255 80;" xml:space="preserve"> <path id="button" sketch:type="MSShapeGroup" class="st0" d="M122.3-2H21.1C21.1-2-4,10.2-4,39s25.1,41,25.1,41h101.2 h101.2c0,0,25.1-12.2,25.1-41S223.5-2,223.5-2H122.3z"/> </svg>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Button using SVG - Script Codes CSS Codes
.btn-holder { position: relative; display: inline-block; background: transparent; border-radius: 28px / 40px; max-height: 80px; overflow: hidden;
}
.btn-holder:hover svg { fill: #FF6347;
}
.btn-holder:hover:before { right: 0;
}
.btn-holder:before { content: ""; position: absolute; width: 50%; height: 100%; z-index: 0; top: 0; right: -50%; background: #FFA500; border-top-left-radius: 50px; border-bottom-left-radius: 50px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;
}
.btn-holder svg { fill: #d40164; width: 253px; height: 80px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;
}
.btn-holder .button { position: absolute; z-index: 0; top: 0; bottom: 0; text-align: center; border: 0; width: 100%; background: transparent; font-size: 1.5rem; color: white; padding: 0; margin: 0;
}
Button using SVG - Script Codes JS Codes
$('button').click (function() { alert('Hello');
});
Developer | Mohomed Anees |
Username | mohomedanees |
Uploaded | August 27, 2022 |
Rating | 3 |
Size | 2,663 Kb |
Views | 22,264 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Button Effect Final | 2,162 Kb |
Responsive image height | 1,702 Kb |
Image Caption on Hover | 1,933 Kb |
Outer border to a Div | 2,219 Kb |
Button Effects | 4,076 Kb |
Shake Effect in CSS3 | 2,091 Kb |
Button Fix 3 | 2,893 Kb |
Transparent CSS Triangle with Borders | 2,195 Kb |
Custom Radio Button | 1,186 Kb |
Modal Popup | 2,923 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Canvas Fireworks | Jackrugile | 6,200 Kb |
Eunice A | Ejbronze | 2,203 Kb |
A Pen by Kevin | Kevinkenger | 2,642 Kb |
A Pen by Paul Sullivan | Pwsm50 | 2,349 Kb |
Testing Code Pen | Jduprey | 1,468 Kb |
Fullscreen Parallax | Bassta | 3,313 Kb |
LeMandinque | Aadesida | 9,046 Kb |
Medium Menu | Lucasmotta | 3,923 Kb |
Wikipedia Viewer | Thalpha | 4,426 Kb |
Import shader in three.js | Khangeldy | 2,636 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!