{"id":18306,"date":"2025-05-27T12:41:23","date_gmt":"2025-05-27T10:41:23","guid":{"rendered":"https:\/\/alvarotrigo.com\/blog\/?p=18306"},"modified":"2025-10-07T00:44:56","modified_gmt":"2025-10-06T22:44:56","slug":"css-submit-button","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/css-submit-button\/","title":{"rendered":"31 Beautiful CSS Submit Buttons [Examples]"},"content":{"rendered":"\n<p>Submit buttons are essential for any form, and their styling can significantly impact your visitors. In this article, I have compiled some of the most interesting <strong>CSS submit button<\/strong> <strong>styles<\/strong> that I found on the internet for your consideration.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1067\" data-src=\"https:\/\/alvarotrigo.com\/blog\/wp-content\/uploads\/2025\/05\/css-submit-button-styles.jpg\" alt=\"CSS Submit Button Styles\" class=\"wp-image-18307 lazyload\" data-srcset=\"https:\/\/alvarotrigo.com\/blog\/wp-content\/uploads\/2025\/05\/css-submit-button-styles.jpg 1600w, https:\/\/alvarotrigo.com\/blog\/wp-content\/uploads\/2025\/05\/css-submit-button-styles-300x200.jpg 300w, https:\/\/alvarotrigo.com\/blog\/wp-content\/uploads\/2025\/05\/css-submit-button-styles-1024x683.jpg 1024w, https:\/\/alvarotrigo.com\/blog\/wp-content\/uploads\/2025\/05\/css-submit-button-styles-768x512.jpg 768w, https:\/\/alvarotrigo.com\/blog\/wp-content\/uploads\/2025\/05\/css-submit-button-styles-1536x1024.jpg 1536w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1067;\" \/><\/figure>\n\n\n\n<p>Some examples focus purely on HTML and CSS, while others incorporate JavaScript or jQuery for additional effects and functionality. Simply choose the one that best fits your requirements.&nbsp;<\/p>\n\n\n\n<p>Also, feel free to customize the styles to suit your design needs. We have included the author of each example in case you require additional information.<\/p>\n\n\n\n<h2 id=\"1-drone-checkout-submit-css-button\" class=\"wp-block-heading\">1. Drone Checkout Submit CSS Button<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qEELyeZ\" data-src=\"\/\/codepen.io\/anon\/embed\/qEELyeZ?height=450&amp;theme-id=1&amp;slug-hash=qEELyeZ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qEELyeZ\" title=\"CodePen Embed qEELyeZ\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS + JavaScript<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/suez\" rel=\"nofollow noopener\" target=\"_blank\">Nikolay Talanov<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/qEELyeZ\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"2-balls-spinning-submit-button\" class=\"wp-block-heading\">2. Balls Spinning Submit Button<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zxxyLJV\" data-src=\"\/\/codepen.io\/anon\/embed\/zxxyLJV?height=450&amp;theme-id=1&amp;slug-hash=zxxyLJV&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zxxyLJV\" title=\"CodePen Embed zxxyLJV\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS + jQuery<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/claudiosc8\" rel=\"nofollow noopener\" target=\"_blank\">Claudio Scotto<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/zxxyLJV\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"3-basic-style-css-submit-button\" class=\"wp-block-heading\">3. Basic Style CSS Submit Button<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JoowZmm\" data-src=\"\/\/codepen.io\/anon\/embed\/JoowZmm?height=450&amp;theme-id=1&amp;slug-hash=JoowZmm&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JoowZmm\" title=\"CodePen Embed JoowZmm\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/alvarotrigo\" rel=\"nofollow noopener\" target=\"_blank\">\u00c1lvaro Trigo<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/JoowZmm\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"4-basic-css-button-type-submit\" class=\"wp-block-heading\">4. Basic CSS Button Type Submit<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_myyaKad\" data-src=\"\/\/codepen.io\/anon\/embed\/myyaKad?height=450&amp;theme-id=1&amp;slug-hash=myyaKad&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed myyaKad\" title=\"CodePen Embed myyaKad\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS + JavaScript<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/alvarotrigo\" rel=\"nofollow noopener\" target=\"_blank\">\u00c1lvaro Trigo<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/myyaKad\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"5-animated-css-submit-buttons\" class=\"wp-block-heading\">5. Animated CSS Submit Buttons<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MYYZBKG\" data-src=\"\/\/codepen.io\/anon\/embed\/MYYZBKG?height=450&amp;theme-id=1&amp;slug-hash=MYYZBKG&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MYYZBKG\" title=\"CodePen Embed MYYZBKG\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/Shruti-Ag\" rel=\"nofollow noopener\" target=\"_blank\">Shruti<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/MYYZBKG\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"6-form-submit-button-with-tick-animation\" class=\"wp-block-heading\">6. Form Submit Button With Tick Animation<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZYYVjOj\" data-src=\"\/\/codepen.io\/anon\/embed\/ZYYVjOj?height=450&amp;theme-id=1&amp;slug-hash=ZYYVjOj&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZYYVjOj\" title=\"CodePen Embed ZYYVjOj\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS + jQuery<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/HiddeDeRidder\" rel=\"nofollow noopener\" target=\"_blank\">Hidde Eertman<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/ZYYVjOj\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"7-upload-button-with-confirmation-alert\" class=\"wp-block-heading\">7. Upload Button With Confirmation Alert<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_myyajOP\" data-src=\"\/\/codepen.io\/anon\/embed\/myyajOP?height=450&amp;theme-id=1&amp;slug-hash=myyajOP&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed myyajOP\" title=\"CodePen Embed myyajOP\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS + jQuery<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/Beni70\" rel=\"nofollow noopener\" target=\"_blank\">Beni<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/myyajOP\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"8-smash-to-submit\" class=\"wp-block-heading\">8. Smash to Submit<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yyyGqwG\" data-src=\"\/\/codepen.io\/anon\/embed\/yyyGqwG?height=450&amp;theme-id=1&amp;slug-hash=yyyGqwG&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yyyGqwG\" title=\"CodePen Embed yyyGqwG\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS + Javascript GSAP<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/aaroniker\" rel=\"nofollow noopener\" target=\"_blank\">Aaron Iker<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/yyyGqwG\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"9-css-style-submit-button-effects\" class=\"wp-block-heading\">9. CSS Style Submit Button Effects<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oggJMWN\" data-src=\"\/\/codepen.io\/anon\/embed\/oggJMWN?height=450&amp;theme-id=1&amp;slug-hash=oggJMWN&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oggJMWN\" title=\"CodePen Embed oggJMWN\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/pamdayne\" rel=\"nofollow noopener\" target=\"_blank\">Pamela Dayne<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/oggJMWN\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"10-css-submit-spin-effect\" class=\"wp-block-heading\">10. CSS Submit Spin Effect<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_pvvqZwV\" data-src=\"\/\/codepen.io\/anon\/embed\/pvvqZwV?height=450&amp;theme-id=1&amp;slug-hash=pvvqZwV&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed pvvqZwV\" title=\"CodePen Embed pvvqZwV\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/Scario\" rel=\"nofollow noopener\" target=\"_blank\">Davide<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/pvvqZwV\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"11-loading-animation-submit-button\" class=\"wp-block-heading\">11. Loading Animation Submit Button<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zxxyLdb\" data-src=\"\/\/codepen.io\/anon\/embed\/zxxyLdb?height=450&amp;theme-id=1&amp;slug-hash=zxxyLdb&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zxxyLdb\" title=\"CodePen Embed zxxyLdb\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS + Javascript<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/frontendcharm\" rel=\"nofollow noopener\" target=\"_blank\">Ariba Madakia<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/zxxyLdb\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"12-arrowed-css-submit-button\" class=\"wp-block-heading\">12. Arrowed CSS Submit Button<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vEEvaWG\" data-src=\"\/\/codepen.io\/anon\/embed\/vEEvaWG?height=450&amp;theme-id=1&amp;slug-hash=vEEvaWG&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vEEvaWG\" title=\"CodePen Embed vEEvaWG\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/aloeandnatural\" rel=\"nofollow noopener\" target=\"_blank\">Nicolas Leduc<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/vEEvaWG\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"13-disable-button-on-submit\" class=\"wp-block-heading\">13. Disable Button on Submit<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yyyGqpx\" data-src=\"\/\/codepen.io\/anon\/embed\/yyyGqpx?height=450&amp;theme-id=1&amp;slug-hash=yyyGqpx&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yyyGqpx\" title=\"CodePen Embed yyyGqpx\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS + jQuery<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/grace-snow\" rel=\"nofollow noopener\" target=\"_blank\">Grace Snow<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/yyyGqpx\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"14-send-loading-button\" class=\"wp-block-heading\">14. Send Loading Button<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wBBRXBV\" data-src=\"\/\/codepen.io\/anon\/embed\/wBBRXBV?height=450&amp;theme-id=1&amp;slug-hash=wBBRXBV&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wBBRXBV\" title=\"CodePen Embed wBBRXBV\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS + jQuery<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/ashleynolan\" rel=\"nofollow noopener\" target=\"_blank\">Ashley Watson-Nolan<\/a>&nbsp;<\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/wBBRXBV\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"15-paper-plane-submit-send-button\" class=\"wp-block-heading\">15. Paper Plane Submit Send Button<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KwwbBQe\" data-src=\"\/\/codepen.io\/anon\/embed\/KwwbBQe?height=450&amp;theme-id=1&amp;slug-hash=KwwbBQe&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KwwbBQe\" title=\"CodePen Embed KwwbBQe\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS + Javascript GSAP<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/petenico26\" rel=\"nofollow noopener\" target=\"_blank\">Peter<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/KwwbBQe\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"16-send-button-plane-taking-off\" class=\"wp-block-heading\">16. Send Button Plane Taking Off<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jEEXpzx\" data-src=\"\/\/codepen.io\/anon\/embed\/jEEXpzx?height=450&amp;theme-id=1&amp;slug-hash=jEEXpzx&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jEEXpzx\" title=\"CodePen Embed jEEXpzx\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS + jQuery<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/DanielPintilei\" rel=\"nofollow noopener\" target=\"_blank\">Daniel Pintilei<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/jEEXpzx\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"17-rocket-submit-button\" class=\"wp-block-heading\">17. Rocket Submit Button<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jEEXpxK\" data-src=\"\/\/codepen.io\/anon\/embed\/jEEXpxK?height=450&amp;theme-id=1&amp;slug-hash=jEEXpxK&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jEEXpxK\" title=\"CodePen Embed jEEXpxK\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS + Javascript<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/Anon_satyam\" rel=\"nofollow noopener\" target=\"_blank\">Satyam Singh<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/jEEXpxK\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"18-css-submit-button-arrowed-on-hover\" class=\"wp-block-heading\">18. CSS Submit Button Arrowed on Hover<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_XJJoBYQ\" data-src=\"\/\/codepen.io\/anon\/embed\/XJJoBYQ?height=450&amp;theme-id=1&amp;slug-hash=XJJoBYQ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed XJJoBYQ\" title=\"CodePen Embed XJJoBYQ\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/Krar\" rel=\"nofollow noopener\" target=\"_blank\">Krar<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/XJJoBYQ\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"19-css-form-submit-button\" class=\"wp-block-heading\">19. CSS Form Submit Button<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zxxyLLV\" data-src=\"\/\/codepen.io\/anon\/embed\/zxxyLLV?height=450&amp;theme-id=1&amp;slug-hash=zxxyLLV&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zxxyLLV\" title=\"CodePen Embed zxxyLLV\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/sumeet1610\" rel=\"nofollow noopener\" target=\"_blank\">Sumeet Yadav<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/zxxyLLV\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"20-fancy-progress-submit-button\" class=\"wp-block-heading\">20. Fancy Progress Submit Button<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vEEvaQy\" data-src=\"\/\/codepen.io\/anon\/embed\/vEEvaQy?height=450&amp;theme-id=1&amp;slug-hash=vEEvaQy&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vEEvaQy\" title=\"CodePen Embed vEEvaQy\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS + jQuery<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/ky0suke\" rel=\"nofollow noopener\" target=\"_blank\">Kyosuke<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/vEEvaQy\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"21-dot-effect-submit-button\" class=\"wp-block-heading\">21. Dot Effect Submit Button<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JoowBqY\" data-src=\"\/\/codepen.io\/anon\/embed\/JoowBqY?height=450&amp;theme-id=1&amp;slug-hash=JoowBqY&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JoowBqY\" title=\"CodePen Embed JoowBqY\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS + jQuery<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/yeptony\" rel=\"nofollow noopener\" target=\"_blank\">Tom<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/JoowBqY\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"22-pure-css-submit-spinning-button\" class=\"wp-block-heading\">22. Pure CSS Submit Spinning Button<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_emmxgxx\" data-src=\"\/\/codepen.io\/anon\/embed\/emmxgxx?height=450&amp;theme-id=1&amp;slug-hash=emmxgxx&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed emmxgxx\" title=\"CodePen Embed emmxgxx\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/Anon_satyam\" rel=\"nofollow noopener\" target=\"_blank\">Satyam Singh<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/emmxgxx\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"23-finish-svg-submit-button\" class=\"wp-block-heading\">23. Finish SVG Submit Button<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_azzXpro\" data-src=\"\/\/codepen.io\/anon\/embed\/azzXpro?height=450&amp;theme-id=1&amp;slug-hash=azzXpro&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed azzXpro\" title=\"CodePen Embed azzXpro\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS + jQuery<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/deboracamargos\" rel=\"nofollow noopener\" target=\"_blank\">D\u00e9bora Camargos<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/azzXpro\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"24-submit-button-with-success-animation\" class=\"wp-block-heading\">24. Submit Button With Success Animation<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jEEdyop\" data-src=\"\/\/codepen.io\/anon\/embed\/jEEdyop?height=450&amp;theme-id=1&amp;slug-hash=jEEdyop&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jEEdyop\" title=\"CodePen Embed jEEdyop\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/oxy-bee\" rel=\"nofollow noopener\" target=\"_blank\">Oxana<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/jEEdyop\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"25-submit-button-with-bidirectional-loading-bar\" class=\"wp-block-heading\">25. Submit Button With Bi-directional Loading Bar<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WbbPRqJ\" data-src=\"\/\/codepen.io\/anon\/embed\/WbbPRqJ?height=450&amp;theme-id=1&amp;slug-hash=WbbPRqJ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WbbPRqJ\" title=\"CodePen Embed WbbPRqJ\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS + JavaScript<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/kiru-z\" rel=\"nofollow noopener\" target=\"_blank\">Kiru<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/WbbPRqJ\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"26-smooth-loading-submit-button\" class=\"wp-block-heading\">26. Smooth Loading Submit Button<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_pvvGRMx\" data-src=\"\/\/codepen.io\/anon\/embed\/pvvGRMx?height=450&amp;theme-id=1&amp;slug-hash=pvvGRMx&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed pvvGRMx\" title=\"CodePen Embed pvvGRMx\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS + jQuery<br><strong>Author:<\/strong>&nbsp; <a href=\"https:\/\/codepen.io\/sfaisal\" rel=\"nofollow noopener\" target=\"_blank\">Sayed Faisal<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/pvvGRMx\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"27-submit-tech-button\" class=\"wp-block-heading\">27. Submit Tech Button<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PwwVpYJ\" data-src=\"\/\/codepen.io\/anon\/embed\/PwwVpYJ?height=450&amp;theme-id=1&amp;slug-hash=PwwVpYJ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PwwVpYJ\" title=\"CodePen Embed PwwVpYJ\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS + jQuery<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/Zaku\" rel=\"nofollow noopener\" target=\"_blank\">Tamino Martinius<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/PwwVpYJ\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"28-send-loader\" class=\"wp-block-heading\">28. Send Loader<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_XJJOMrL\" data-src=\"\/\/codepen.io\/anon\/embed\/XJJOMrL?height=450&amp;theme-id=1&amp;slug-hash=XJJOMrL&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed XJJOMrL\" title=\"CodePen Embed XJJOMrL\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS + JavaScript<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/mrraduan\" rel=\"nofollow noopener\" target=\"_blank\">Raduan<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/XJJOMrL\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"29-pure-css-submit-loader\" class=\"wp-block-heading\">29. Pure CSS Submit Loader<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zxxeZYg\" data-src=\"\/\/codepen.io\/anon\/embed\/zxxeZYg?height=450&amp;theme-id=1&amp;slug-hash=zxxeZYg&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zxxeZYg\" title=\"CodePen Embed zxxeZYg\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/chancesq\" rel=\"nofollow noopener\" target=\"_blank\">Chance Squires<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/zxxeZYg\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"30-animated-submit-button\" class=\"wp-block-heading\">30. Animated Submit Button<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZYYweYZ\" data-src=\"\/\/codepen.io\/anon\/embed\/ZYYweYZ?height=450&amp;theme-id=1&amp;slug-hash=ZYYweYZ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZYYweYZ\" title=\"CodePen Embed ZYYweYZ\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS + jQuery<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/zachacole\" rel=\"nofollow noopener\" target=\"_blank\">Zach Cole<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/ZYYweYZ\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"31-3d-submit-button-html-css\" class=\"wp-block-heading\">31. 3D Submit Button HTML + CSS<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PwwVpPO\" data-src=\"\/\/codepen.io\/anon\/embed\/PwwVpPO?height=450&amp;theme-id=1&amp;slug-hash=PwwVpPO&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PwwVpPO\" title=\"CodePen Embed PwwVpPO\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Code: <\/strong>CSS<br><strong>Author:<\/strong> <a href=\"https:\/\/codepen.io\/pavCieslak\" rel=\"nofollow noopener\" target=\"_blank\">Pawel<\/a><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/PwwVpPO\" rel=\"nofollow noopener\" target=\"_blank\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"related-articles\" class=\"wp-block-heading\">Related Articles<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/css-round-button\/\">17+ CSS Round Buttons [Examples &amp; How to create]<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/toggle-switch-css\/\">20 Best Toggle Switches For Your Site [Pure CSS Examples]<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/best-css-button-hover-effects\/\">10 Best CSS button hover effects<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/html-css-tabs\/\">20 Cool HTML &amp; CSS Tabs [Examples]<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/disable-button-jquery\/\">Disable button in jQuery [With examples]<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Discover some of the best CSS submit button examples!<\/p>\n","protected":false},"author":1,"featured_media":18307,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[106],"tags":[9],"class_list":["post-18306","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-css"],"acf":[],"_links":{"self":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/18306","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/comments?post=18306"}],"version-history":[{"count":19,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/18306\/revisions"}],"predecessor-version":[{"id":19590,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/18306\/revisions\/19590"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media\/18307"}],"wp:attachment":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media?parent=18306"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/categories?post=18306"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/tags?post=18306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}