SVG in a Button Tag
How do I make an svg in a button tag?
Show an SVG Icon inside a button HTML tag.. What is a svg in a button tag? How do you make a svg in a button tag? This script and codes were developed by Alexander Hadik on 16 September 2022, Friday.
SVG in a Button Tag - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG in a Button Tag</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button class="input__button" id="inputTextSubmit" action="submit">Submit</button> <script src="js/index.js"></script>
</body>
</html>
SVG in a Button Tag - Script Codes CSS Codes
html { height: 100%; width: 100%;
}
body { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.input__button { background-color: #127899; border: none; outline: none; color: white; cursor: pointer; font-size: 1.25em; height: 2.8em; position: relative; width: 100px; -webkit-transition: all 0.25s; transition: all 0.25s;
}
.input__button::before { -webkit-transition: all 0.25s; transition: all 0.25s; display: inline-block; height: 0; width: 0; content: url("http://31fd5.http.dal05.cdn.softlayer.net/test/loading.svg");
}
.input__button--loading { width: 2.8em; border-radius: 50%; color: transparent; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite;
}
.input__button--loading::before { position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; height: auto; width: auto;
}
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
SVG in a Button Tag - Script Codes JS Codes
"use strict";
document.querySelector("#inputTextSubmit").addEventListener('click', function () { document.querySelector("#inputTextSubmit").classList.toggle('input__button--loading');
});
Developer | Alexander Hadik |
Username | ahadik |
Uploaded | September 16, 2022 |
Rating | 3 |
Size | 2,884 Kb |
Views | 30,360 |
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 |
Pricing Table | 4,023 Kb |
Transcriptic Typography | 4,188 Kb |
Welcome to Transcriptic | 3,846 Kb |
Pricing Cards V3 | 6,584 Kb |
Transcriptic Pricing Cards | 11,150 Kb |
Workcell | 5,864 Kb |
Ops Implementation | 8,026 Kb |
Pricing Cards V2 | 6,308 Kb |
Submit Card | 3,980 Kb |
Table Action | 7,906 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 |
Rainbow Drops | Csbarnes | 2,365 Kb |
CSS3 Snow Animation | NickyCDK | 1,695 Kb |
LDE old privacy page | Jasonangle | 2,339 Kb |
Comparison of Roboto Draft vs Roboto | Jxnblk | 2,880 Kb |
Jochaho Skeleton | Dhanushbadge | 1,689 Kb |
Airbnb Homepage | SindhujaD | 2,480 Kb |
Sticky div | Kaslab | 2,225 Kb |
Ripples in water | Nobitagit | 2,704 Kb |
Feedback Page | TessDiNapoli | 2,836 Kb |
Word Wrap Algorithm for Multiline Canvas Text | Peterhry | 2,349 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!