Confirmation button
How do I make an confirmation button?
What is a confirmation button? How do you make a confirmation button? This script and codes were developed by Kasper Mikiewicz on 21 November 2022, Monday.
Confirmation button - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Confirmation button</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://weloveiconfonts.com/api/?family=fontawesome);
[class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif; font-weight: normal; font-style: normal;
}
body { font: 1em/1.5 sans-serif; padding: 2%; text-align: center;
}
.btn { border-radius: .25em; border: none; box-shadow: inset 0 -0.125em 0 rgba(0, 0, 0, 0.15); box-sizing: border-box; color: #fff; cursor: pointer; display: inline-block; font-weight: 600; height: 2.5em; line-height: 2.5; margin: 0; outline: none; padding: 0 1em; text-decoration: none; vertical-align: middle; white-space: nowrap;
}
.btn:hover, .btn:focus { box-shadow: inset 0 -0.125em 0 rgba(0, 0, 0, 0.15), inset 0 -8em 0 rgba(255, 255, 255, 0.15); color: #fff;
}
.btn:active { box-shadow: inset 0 -8em 0 rgba(0, 0, 0, 0.1);
}
.btn--fn { background: #4787ed;
}
.btn--positive { background: #24b982;
}
.btn--negative { background: #eb5837;
}
.btn-group :first-child { border-radius: .25em 0 0 .25em;
}
.btn-group :first-child ~ * { border-radius: 0;
}
.btn-group :last-child { border-radius: 0 .25em .25em 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <form action=""> <h1>Confirmation button</h1> <button type=submit class="btn btn--fn js-confirm">Remove article</button>
</form> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Confirmation button - Script Codes CSS Codes
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
[class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif; font-weight: normal; font-style: normal;
}
body { font: 1em/1.5 sans-serif; padding: 2%; text-align: center;
}
.btn { border-radius: .25em; border: none; box-shadow: inset 0 -0.125em 0 rgba(0, 0, 0, 0.15); box-sizing: border-box; color: #fff; cursor: pointer; display: inline-block; font-weight: 600; height: 2.5em; line-height: 2.5; margin: 0; outline: none; padding: 0 1em; text-decoration: none; vertical-align: middle; white-space: nowrap;
}
.btn:hover, .btn:focus { box-shadow: inset 0 -0.125em 0 rgba(0, 0, 0, 0.15), inset 0 -8em 0 rgba(255, 255, 255, 0.15); color: #fff;
}
.btn:active { box-shadow: inset 0 -8em 0 rgba(0, 0, 0, 0.1);
}
.btn--fn { background: #4787ed;
}
.btn--positive { background: #24b982;
}
.btn--negative { background: #eb5837;
}
.btn-group :first-child { border-radius: .25em 0 0 .25em;
}
.btn-group :first-child ~ * { border-radius: 0;
}
.btn-group :last-child { border-radius: 0 .25em .25em 0;
}
Confirmation button - Script Codes JS Codes
var Confirm = function(selector) { var fn = function(event) { event.preventDefault(); var $btn = $(this); var $confirmation = $('<div class="btn-group"/>'); var $confirm = $('<span/>') .addClass('btn btn--negative') .prepend('<i class="fontawesome-ok"></i>') .on('click', function() { $confirmation.remove(); $btn.show().trigger('click'); }).appendTo($confirmation); var $cancel = $('<span/>') .addClass('btn btn--positive') .prepend('<i class="fontawesome-remove"></i>') .on('click', function() { $confirmation.remove(); $btn.show().one('click', fn); }).appendTo($confirmation); $btn.hide().after($confirmation); }; $(selector).one('click', fn);
};
Confirm('.js-confirm');
Developer | Kasper Mikiewicz |
Username | Idered |
Uploaded | November 21, 2022 |
Rating | 4 |
Size | 3,519 Kb |
Views | 12,144 |
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 |
Pure CSS read more toggle | 2,344 Kb |
Vue.js based Todo list | 5,092 Kb |
Pagination | 3,868 Kb |
Pure CSS3 Tags | 4,052 Kb |
Flat switch | 2,555 Kb |
A Pen by Kasper Mikiewicz | 2,950 Kb |
Simple loader | 2,645 Kb |
Flat radio buttons | 2,759 Kb |
Responsive color picker | 2,932 Kb |
Color accordion | 1,925 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 |
Responsive Section hover effect to show content | Berdejitendra | 2,540 Kb |
Sticky div | Kaslab | 2,225 Kb |
Flexbox slider | Rendro | 3,459 Kb |
NeeilTimer | Neeilan | 2,836 Kb |
Marching Squares Visualized | Sakri | 7,074 Kb |
Hmmm... | Rk007 | 4,848 Kb |
A Pen by Mike Otis | Mikeotis | 3,185 Kb |
Table Exercise | Fresco | 9,585 Kb |
React Recipe Box | Krokodill | 5,347 Kb |
CSS Colors | Alexpate | 2,232 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!