{"id":1206,"date":"2019-06-08T16:22:40","date_gmt":"2019-06-08T14:22:40","guid":{"rendered":"https:\/\/webdeasy.de\/?p=1206"},"modified":"2025-04-04T16:52:39","modified_gmt":"2025-04-04T14:52:39","slug":"css-buttons","status":"publish","type":"post","link":"https:\/\/webdeasy.de\/css-buttons\/","title":{"rendered":"86 tolle CSS Buttons"},"content":{"rendered":"\n<p class=\"has-drop-cap\">Bist du auf der Suche nach neuen CSS Buttons f\u00fcr deine Webseite? Perfekt! Dann bist du hier genau richtig! Schau dir meine Sammlung von CSS Buttons an und kopiere einfach deinen Favoriten.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Ob dick und fett auf deiner Startseite oder klein und dezent im Footer, Buttons sind f\u00fcr den Nutzerfluss auf deiner Website ein sehr wichtiges Designelement. F\u00fcr eine Firmenwebsite wird oft auf ein dezenteres Design gesetzt, wohin gegen bei kreativen Branchen eher etwas auff\u00e4lligere und &#8222;schrille&#8220; Buttons genutzt werden. Damit alle Branchen gleicherma\u00dfen bedient sind, findest du hier ganz viele verschiedene Button-Styles.<\/p>\n\n\n\n<p>Auch auf Animationen beim Hover oder Focus lege ich &#8211; und viele andere Webentwickler\/designer &#8211; viel Wert, weshalb alle der folgenden Buttons auch jeweils sch\u00f6ne Animationen mitbringen. Aber nun starten wir direkt!<\/p>\n\n\n\n<p class=\"info-notice info\">Die gezeigten Pens sind mit <em>MIT<\/em> lizensiert. Mehr Infos zur eigenen Nutzung findest du im <a href=\"https:\/\/blog.codepen.io\/documentation\/licensing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Codepen Blog<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"1-hover-glow-effect\">#1 Hover Glow Effect<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full codepen-demo-disabled\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"186\" src=\"https:\/\/webdeasy.de\/wp-content\/uploads\/2019\/06\/codepen-demo-disabled-1.png\" alt=\"Hier sollte eigentlich eine Demo auftauchen.\" class=\"wp-image-9832\" srcset=\"https:\/\/webdeasy.de\/wp-content\/uploads\/2019\/06\/codepen-demo-disabled-1.png 840w, https:\/\/webdeasy.de\/wp-content\/uploads\/2019\/06\/codepen-demo-disabled-1-650x144.png 650w, https:\/\/webdeasy.de\/wp-content\/uploads\/2019\/06\/codepen-demo-disabled-1-750x166.png 750w, https:\/\/webdeasy.de\/wp-content\/uploads\/2019\/06\/codepen-demo-disabled-1-768x170.png 768w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"kocsten\" data-slug-hash=\"rggjXp\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"\u0427\u0438\u0441\u0442\u044b\u0439 CSS Button Hover Glow Effect\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/kocsten\/pen\/rggjXp\/\">\n  \u0427\u0438\u0441\u0442\u044b\u0439 CSS Button Hover Glow Effect<\/a> by Kocsten (<a href=\"https:\/\/codepen.io\/kocsten\">@kocsten<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Kocsten<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/kocsten\/pen\/rggjXp\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"2-rounded-button\">#2 Rounded Button<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"400\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"alticreation\" data-slug-hash=\"zBZwOP\" style=\"height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Pure Css Button Hover effect\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/alticreation\/pen\/zBZwOP\/\">\n  Pure Css Button Hover effect<\/a> by alticreation (<a href=\"https:\/\/codepen.io\/alticreation\">@alticreation<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">alticreation<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/alticreation\/pen\/zBZwOP\/\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"3-blubby-button\">#3 Blubby Button<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"265\" data-theme-id=\"default\" data-default-tab=\"result\" data-user=\"nourabusoud\" data-slug-hash=\"ypZzMM\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Bubbly Button\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/nourabusoud\/pen\/ypZzMM\">\n  Bubbly Button<\/a> by Nour Saud (<a href=\"https:\/\/codepen.io\/nourabusoud\">@nourabusoud<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Nour Saud<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/nourabusoud\/pen\/ypZzMM\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"4-icon-buttons\">#4  Icon buttons<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"295\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"andrea-maselli\" data-slug-hash=\"KLbwJw\" style=\"height: 295px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Icon buttons\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/andrea-maselli\/pen\/KLbwJw\/\">\n  Icon buttons<\/a> by Andrea Maselli (<a href=\"https:\/\/codepen.io\/andrea-maselli\">@andrea-maselli<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Andrea Maselli<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/andrea-maselli\/pen\/KLbwJw\/\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"5-blobs-button\">#5 Blobs button<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"379\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"hilwat\" data-slug-hash=\"BeemVX\" style=\"height: 379px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Blobs button\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/hilwat\/pen\/BeemVX\/\">\n  Blobs button<\/a> by Hilary (<a href=\"https:\/\/codepen.io\/hilwat\">@hilwat<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Hilary<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/hilwat\/pen\/BeemVX\/\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-658\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"6-thin-buttons\">#6 Thin Buttons<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"345\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"natalia-reshetnikova\" data-slug-hash=\"oRRjPP\" style=\"height: 345px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Simple CSS Button Hover Effects\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/natalia-reshetnikova\/pen\/oRRjPP\/\">\n  Simple CSS Button Hover Effects<\/a> by Natalia  Reshetnikova (<a href=\"https:\/\/codepen.io\/natalia-reshetnikova\">@natalia-reshetnikova<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Natalia Reshetnikova<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/natalia-reshetnikova\/pen\/oRRjPP\/\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-659\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"7-bootstrap-buttons\">#7 Bootstrap Buttons<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"dew31794\" data-slug-hash=\"wbZXYR\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Pure CSS Button Loader | Bootstrap 4 | SCSS\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/dew31794\/pen\/wbZXYR\/\">\n  Pure CSS Button Loader | Bootstrap 4 | SCSS<\/a> by dew31794 (<a href=\"https:\/\/codepen.io\/dew31794\">@dew31794<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">dew31794<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS), JS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/dew31794\/pen\/wbZXYR\/\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"8-rounded-pulse-button\">#8 Rounded Pulse Button<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"avvign\" data-slug-hash=\"NVJzQW\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"CSS Button With Hover Effect\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/avvign\/pen\/NVJzQW\/\">\n  CSS Button With Hover Effect<\/a> by Raj Kamal (<a href=\"https:\/\/codepen.io\/avvign\">@avvign<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Raj Kamal<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/avvign\/pen\/NVJzQW\/\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"9-css-fizzy-button\">#9 CSS Fizzy Button<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"webLeister\" data-slug-hash=\"XwGENz\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"CSS Fizzy Button\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/webLeister\/pen\/XwGENz\/\">\n  CSS Fizzy Button<\/a> by J\u00fcrgen Leister (<a href=\"https:\/\/codepen.io\/webLeister\">@webLeister<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">J\u00fcrgen Leister<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML (Haml), CSS (SCSS)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/webLeister\/pen\/XwGENz\/\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"10-button-n-045\">#10 Button N\u00b0 045<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"vitor-siqueira\" data-slug-hash=\"xNBExN\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"100 days css Button N\u00b0 045\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/vitor-siqueira\/pen\/xNBExN\/\">\n  100 days css Button N\u00b0 045<\/a> by Vitor Siqueira (<a href=\"https:\/\/codepen.io\/vitor-siqueira\">@vitor-siqueira<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Vitor Siqueira<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/vitor-siqueira\/pen\/xNBExN\/\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-660\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"11-flush-button\">#11 Flush button<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"abhishekbaiju\" data-slug-hash=\"joXzOw\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Flush button\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/abhishekbaiju\/pen\/joXzOw\/\">\n  Flush button<\/a> by AbhishekBaiju (<a href=\"https:\/\/codepen.io\/abhishekbaiju\">@abhishekbaiju<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">AbhishekBaiju<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/abhishekbaiju\/pen\/joXzOw\/\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-661\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"12-button-concept\">#12 Button Concept<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"Shtam3x\" data-slug-hash=\"Bevpxd\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Button Concept\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/Shtam3x\/pen\/Bevpxd\/\">\n  Button Concept<\/a> by Shyam (<a href=\"https:\/\/codepen.io\/Shtam3x\">@Shtam3x<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Shyam<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS), JS (CoffeeScript)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/Shtam3x\/pen\/Bevpxd\/\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-662\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"13-sliced-button\">#13 Sliced Button<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"saraharaya\" data-slug-hash=\"NpwdGv\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"CSS Sliced Button\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/saraharaya\/pen\/NpwdGv\/\">\n  CSS Sliced Button<\/a> by Sarah (<a href=\"https:\/\/codepen.io\/saraharaya\">@saraharaya<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Sarah<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/saraharaya\/pen\/NpwdGv\/\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-663\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"14-more-fancy-icon-buttons\">#14 More fancy Icon buttons<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"ishaansaxena\" data-slug-hash=\"WoJGRK\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Pure CSS Buttons\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/ishaansaxena\/pen\/WoJGRK\/\">\n  Pure CSS Buttons<\/a> by Ishaan Saxena (<a href=\"https:\/\/codepen.io\/ishaansaxena\">@ishaansaxena<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Ishaan Saxena<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML (Pug), CSS (SCSS)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/ishaansaxena\/pen\/WoJGRK\/\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"15-button-change\">#15 Button Change<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"thelaazyguy\" data-slug-hash=\"WEXwMO\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Css Button Hover #5\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/thelaazyguy\/pen\/WEXwMO\/\">\n  Css Button Hover #5<\/a> by thelaazyguy (<a href=\"https:\/\/codepen.io\/thelaazyguy\">@thelaazyguy<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">thelaazyguy<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/thelaazyguy\/pen\/WEXwMO\/\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-664\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"16-simple-button\">#16 Simple Button<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"tyberiu88\" data-slug-hash=\"YgJGMX\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"CSS button\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/tyberiu88\/pen\/YgJGMX\/\">\n  CSS button<\/a> by Tiberiu Raducea (<a href=\"https:\/\/codepen.io\/tyberiu88\">@tyberiu88<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Tiberiu Raducea<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/tyberiu88\/pen\/YgJGMX\/\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"17-button-flip\">#17 Button Flip<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"MoorLex\" data-slug-hash=\"NBwNZa\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Auto Width  Css Button Flip\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/MoorLex\/pen\/NBwNZa\/\">\n  Auto Width  Css Button Flip<\/a> by Alex Moore (<a href=\"https:\/\/codepen.io\/MoorLex\">@MoorLex<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Alex Moore<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/MoorLex\/pen\/NBwNZa\/\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"18-swipe-right-button\">#18 Swipe Right Button<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"thelaazyguy\" data-slug-hash=\"brryVq\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Css Button Hover #2 - Background\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/thelaazyguy\/pen\/brryVq\/\">\n  Css Button Hover #2 &#8211; Background<\/a> by thelaazyguy (<a href=\"https:\/\/codepen.io\/thelaazyguy\">@thelaazyguy<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">thelaazyguy<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/thelaazyguy\/pen\/brryVq\/\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"19-fancy-buttons\">#19 Fancy Buttons<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"373\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"alexandrevale\" data-slug-hash=\"ZMxQJp\" style=\"height: 373px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"CSS Button Effect\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/alexandrevale\/pen\/ZMxQJp\/\">\n  CSS Button Effect<\/a> by Alexandre do Vale (<a href=\"https:\/\/codepen.io\/alexandrevale\">@alexandrevale<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Alexandre do Vale<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS, JS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/alexandrevale\/pen\/ZMxQJp\/\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"20-flipcover-buttons\">#20 FlipCover Buttons<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"342\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"vveleva\" data-slug-hash=\"Areng\" style=\"height: 342px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"FlipCover CSS Mixin\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/vveleva\/pen\/Areng\/\">\n  FlipCover CSS Mixin<\/a> by Velina V Veleva (<a href=\"https:\/\/codepen.io\/vveleva\">@vveleva<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Velina V Veleva<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS), JS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/vveleva\/pen\/Areng\/\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"collection-of-button-hover-effects\">#21 Collection of Button Hover Effects<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"401\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"davidicus\" data-slug-hash=\"emgQKJ\" style=\"height: 401px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Collection of Button Hover Effects\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/davidicus\/pen\/emgQKJ\">\n  Collection of Button Hover Effects<\/a> by David Conner (<a href=\"https:\/\/codepen.io\/davidicus\">@davidicus<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">David Conner<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/davidicus\/pen\/emgQKJ\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-665\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"22-css-button-effect-animated-border-glow\">#22 CSS Button Effect: Animated Border &amp; Glow<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"AnthonyBmm\" data-slug-hash=\"poooJmO\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"CSS Button Effect: Animated Border &amp;amp; Glow. \">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/AnthonyBmm\/pen\/poooJmO\">\n  CSS Button Effect: Animated Border &amp; Glow. <\/a> by Blade Multimedia (<a href=\"https:\/\/codepen.io\/AnthonyBmm\">@AnthonyBmm<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Blade Multimedia<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/AnthonyBmm\/pen\/poooJmO\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-666\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"23-css-button-hover\">#23 CSS Button Hover<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"265\" data-theme-id=\"dark\" data-default-tab=\"result\" data-user=\"folaad\" data-slug-hash=\"YvmRpz\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"CSS BUTTON HOVER \">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/folaad\/pen\/YvmRpz\">\n  CSS BUTTON HOVER <\/a> by Imran Pardes (<a href=\"https:\/\/codepen.io\/folaad\">@folaad<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Imran Pardes<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/folaad\/pen\/YvmRpz\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-667\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"24-still-in-view\">#24 Still in View<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"Alexb98\" data-slug-hash=\"XWrqpxB\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"XWrqpxB\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/Alexb98\/pen\/XWrqpxB\">\n  XWrqpxB<\/a> by Alex Bodin (<a href=\"https:\/\/codepen.io\/Alexb98\">@Alexb98<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Alex Bodin<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/Alexb98\/pen\/XWrqpxB\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-668\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"25-pure-css-button-with-ring-indicator\">#25 Pure CSS Button with Ring Indicator<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"325\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"mccombsc\" data-slug-hash=\"ZEzxWPy\" style=\"height: 325px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Pure CSS Button with Ring Indicator\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/mccombsc\/pen\/ZEzxWPy\">\n  Pure CSS Button with Ring Indicator<\/a> by Cole McCombs (<a href=\"https:\/\/codepen.io\/mccombsc\">@mccombsc<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Cole McCombs<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/mccombsc\/pen\/ZEzxWPy\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-669\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"26-button-hover-effects\">#26 Button Hover Effects<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"378\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"kjbrum\" data-slug-hash=\"wBBLXx\" style=\"height: 378px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Button Hover Effects\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/kjbrum\/pen\/wBBLXx\">\n  Button Hover Effects<\/a> by Kyle Brumm (<a href=\"https:\/\/codepen.io\/kjbrum\">@kjbrum<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Kyle Brumm<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS), JS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/kjbrum\/pen\/wBBLXx\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"27-button-bubble-effect\">#27 Button bubble effect<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"265\" data-theme-id=\"default\" data-default-tab=\"result\" data-user=\"Grsmto\" data-slug-hash=\"RPQPPB\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Button bubble effect\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/Grsmto\/pen\/RPQPPB\">\n  Button bubble effect<\/a> by Adrien Grsmto (<a href=\"https:\/\/codepen.io\/Grsmto\">@Grsmto<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Adrien Grsmto<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS), JS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/Grsmto\/pen\/RPQPPB\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"28-animation-submit-button\">#28 Animation Submit Button<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"265\" data-theme-id=\"default\" data-default-tab=\"result\" data-user=\"valentingalmand\" data-slug-hash=\"MYMZZK\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"animation submit button\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/valentingalmand\/pen\/MYMZZK\">\n  animation submit button<\/a> by Valentin Galmand (<a href=\"https:\/\/codepen.io\/valentingalmand\">@valentingalmand<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Valentin Galmand<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS), JS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/valentingalmand\/pen\/MYMZZK\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-670\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"29-who-doesnt-like-fun-buttons\">#29 Who doesn&#8217;t like Fun Buttons?<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"589\" data-theme-id=\"dark\" data-default-tab=\"result\" data-user=\"derekmorash\" data-slug-hash=\"XddZJY\" style=\"height: 589px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"CSS BUTTONS!!\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/derekmorash\/pen\/XddZJY\">\n  CSS BUTTONS!!<\/a> by Derek Morash (<a href=\"https:\/\/codepen.io\/derekmorash\">@derekmorash<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Derek Morash<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/derekmorash\/pen\/XddZJY\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"30-flipside\">#30 Flipside<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"353\" data-theme-id=\"dark\" data-default-tab=\"result\" data-user=\"hakimel\" data-slug-hash=\"ZYRgwB\" style=\"height: 353px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Flipside\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/hakimel\/pen\/ZYRgwB\">\n  Flipside<\/a> by Hakim El Hattab (<a href=\"https:\/\/codepen.io\/hakimel\">@hakimel<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Hakim El Hattab<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS), JS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/hakimel\/pen\/ZYRgwB\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-671\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"31-squishy-toggle-buttons\">#31 Squishy Toggle Buttons<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"279\" data-theme-id=\"dark\" data-default-tab=\"result\" data-user=\"soulwire\" data-slug-hash=\"bKens\" style=\"height: 279px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Squishy Toggle Buttons\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/soulwire\/pen\/bKens\">\n  Squishy Toggle Buttons<\/a> by Justin Windle (<a href=\"https:\/\/codepen.io\/soulwire\">@soulwire<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Justin Windle<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (Sass)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/soulwire\/pen\/bKens\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"32-button-hover-effect-with-box-shadow\">#32 Button hover effect with box-shadow<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"333\" data-theme-id=\"dark\" data-default-tab=\"result\" data-user=\"giana\" data-slug-hash=\"BZaGyP\" style=\"height: 333px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Button hover effects with box-shadow\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/giana\/pen\/BZaGyP\">\n  Button hover effects with box-shadow<\/a> by Giana (<a href=\"https:\/\/codepen.io\/giana\">@giana<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Giana<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/giana\/pen\/BZaGyP\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"33-submit-button-anime-js\">#33 Submit Button (Anime.js)<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"265\" data-theme-id=\"dark\" data-default-tab=\"result\" data-user=\"andrewmillen\" data-slug-hash=\"MoKLob\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Submit Button (Anime.js)\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/andrewmillen\/pen\/MoKLob\">\n  Submit Button (Anime.js)<\/a> by Andrew Millen (<a href=\"https:\/\/codepen.io\/andrewmillen\">@andrewmillen<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Andrew Millen<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS), JS (jQuery & anime.js)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/andrewmillen\/pen\/MoKLob\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-672\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"34-css-button-animation\">#34 CSS Button Animation<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-default-tab=\"result\" data-slug-hash=\"KaLqKR\" data-user=\"sashatran\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/sashatran\/pen\/KaLqKR\">\n  CSS Button Animation<\/a> by Sasha  (<a href=\"https:\/\/codepen.io\/sashatran\">@sashatran<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Sasha<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML (Pug), CSS (SCSS), JS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/sashatran\/pen\/KaLqKR\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-673\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"35-css-button-on-plaid\">#35 CSS Button on Plaid<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-default-tab=\"result\" data-slug-hash=\"wYqJrO\" data-user=\"marcusconnor\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/marcusconnor\/pen\/wYqJrO\">\n  CSS Button on Plaid<\/a> by Marcus Connor (<a href=\"https:\/\/codepen.io\/marcusconnor\">@marcusconnor<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Marcus Connor<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/marcusconnor\/pen\/wYqJrO\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"36-css-button-with-bubbles\">#36 CSS button with bubbles<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-default-tab=\"result\" data-slug-hash=\"dwMpwp\" data-user=\"giana\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/giana\/pen\/dwMpwp\">\n  CSS button with bubbles<\/a> by Giana (<a href=\"https:\/\/codepen.io\/giana\">@giana<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Giana<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/giana\/pen\/dwMpwp\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-674\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"37-jquery-3d-css-button\">#37 jQuery +3D css button<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"460\" data-default-tab=\"result\" data-slug-hash=\"NqdKzK\" data-user=\"CarlosGNotario\" style=\"height: 460px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/CarlosGNotario\/pen\/NqdKzK\">\n  jQuery +3D css button<\/a> by Carlos G Notario (<a href=\"https:\/\/codepen.io\/CarlosGNotario\">@CarlosGNotario<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Carlos G Notario<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS, JS (jQuery)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/CarlosGNotario\/pen\/NqdKzK\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"38-pure-css-button-switch\">#38 Pure CSS button switch<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-default-tab=\"result\" data-slug-hash=\"EurGj\" data-user=\"KittyGiraudel\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/KittyGiraudel\/pen\/EurGj\">\n  Pure CSS button switch<\/a> by Kitty Giraudel (<a href=\"https:\/\/codepen.io\/KittyGiraudel\">@KittyGiraudel<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Kitty Giraudel<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/KittyGiraudel\/pen\/EurGj\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"39-creative-button-hover-collection\">#39 Creative Button Hover Collection<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"451\" data-default-tab=\"result\" data-slug-hash=\"qZRGzK\" data-user=\"ysoftaoglu\" style=\"height: 451px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/ysoftaoglu\/pen\/qZRGzK\">\n  Creative Button Hover Collection<\/a> by Yasin Softao\u011flu (<a href=\"https:\/\/codepen.io\/ysoftaoglu\">@ysoftaoglu<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Yasin Softao\u011flu<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/ysoftaoglu\/pen\/qZRGzK\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-675\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"40-css-button-animations\">#40 CSS Button Animations<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"451\" data-default-tab=\"result\" data-slug-hash=\"JEaRWX\" data-user=\"atloomer\" style=\"height: 451px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/atloomer\/pen\/JEaRWX\">\n  CSS Button Animations<\/a> by Alex Loomer (<a href=\"https:\/\/codepen.io\/atloomer\">@atloomer<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Alex Loomer<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/atloomer\/pen\/JEaRWX\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-676\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"41-css-button-with-hover-effect\">#41 CSS Button with Hover Effect<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-default-tab=\"result\" data-slug-hash=\"LYPMLLV\" data-user=\"JeremyWink\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/JeremyWink\/pen\/LYPMLLV\">\n  CSS Button with Hover Effect<\/a> by Kniw Studio (<a href=\"https:\/\/codepen.io\/JeremyWink\">@JeremyWink<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Kniw Studio<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/JeremyWink\/pen\/LYPMLLV\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-677\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"42-button-practice\">#42 Button Practice<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"377\" data-default-tab=\"result\" data-slug-hash=\"wawXdZ\" data-user=\"ivillacreative\" style=\"height: 377px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/ivillacreative\/pen\/wawXdZ\">\n  Button Practice<\/a> by Ivan Villa (<a href=\"https:\/\/codepen.io\/ivillacreative\">@ivillacreative<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Ivan Villa<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/ivillacreative\/pen\/wawXdZ\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-678\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"43-css-button-neon-shadow-with-animation\">#43 CSS Button-Neon Shadow with Animation<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"MWepJBw\" data-user=\"ps173\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/ps173\/pen\/MWepJBw\">\n  CSS BUTTON-NEON SHADOW WITH ANIMATION<\/a> by Pratham (<a href=\"https:\/\/codepen.io\/ps173\">@ps173<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">ps173<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/ps173\/pen\/MWepJBw\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-679\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"44-six-pure-css-button-hover-animations\">#44 Six pure CSS Button Hover Animations<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"357\" data-default-tab=\"result\" data-slug-hash=\"pbLGZW\" data-user=\"CTNieves\" style=\"height: 357px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/CTNieves\/pen\/pbLGZW\">\n  Six Pure CSS Button Hover Animations<\/a> by Christian (<a href=\"https:\/\/codepen.io\/CTNieves\">@CTNieves<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Christian<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/CTNieves\/pen\/pbLGZW\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"45-3d-css-button\">#45 3D CSS BUTTON<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-default-tab=\"result\" data-slug-hash=\"MWvovYG\" data-user=\"coding-with-SR\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/coding-with-SR\/pen\/MWvovYG\">\n  3D CSS BUTTON<\/a> by SULEMANS CODES (<a href=\"https:\/\/codepen.io\/coding-with-SR\">@coding-with-SR<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">SULEMANS CODES<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS, JS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/coding-with-SR\/pen\/MWvovYG\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"46-70s-css-button\">#46 70s CSS Button<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"376\" data-default-tab=\"result\" data-slug-hash=\"pRdeja\" data-user=\"halvo\" style=\"height: 376px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/halvo\/pen\/pRdeja\">\n  70s CSS Button<\/a> by Jordan Halvorsen (<a href=\"https:\/\/codepen.io\/halvo\">@halvo<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Jordan Halvorsen<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/halvo\/pen\/pRdeja\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"47-100-days-css-button-n-045\">#47 100 days css Button N\u00b0 045<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-default-tab=\"result\" data-slug-hash=\"xNBExN\" data-user=\"vitor-siqueira\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/vitor-siqueira\/pen\/xNBExN\">\n  100 days css Button N\u00b0 045<\/a> by Vitor Siqueira (<a href=\"https:\/\/codepen.io\/vitor-siqueira\">@vitor-siqueira<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Vitor Siqueira<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/vitor-siqueira\/pen\/xNBExN\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-680\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"48-button-hover\">#48 Button Hover<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-default-tab=\"result\" data-slug-hash=\"rZRaNe\" data-user=\"kathykato\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/kathykato\/pen\/rZRaNe\">\n  Button Hover<\/a> by Katherine Kato (<a href=\"https:\/\/codepen.io\/kathykato\">@kathykato<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Katherine Kato<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/kathykato\/pen\/rZRaNe\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"49-download-button-animation\">#49 Download Button Animation<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-default-tab=\"result\" data-slug-hash=\"MWgNKGr\" data-user=\"aaroniker\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/aaroniker\/pen\/MWgNKGr\">\n  Download Button Animation<\/a> by Aaron Iker (<a href=\"https:\/\/codepen.io\/aaroniker\">@aaroniker<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Aaron Iker<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS), JS (gsap)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/aaroniker\/pen\/MWgNKGr\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-681\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"50-liquid-button\">#50 Liquid button<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-default-tab=\"result\" data-slug-hash=\"VbgwEM\" data-user=\"waaark\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/waaark\/pen\/VbgwEM\">\n  Liquid button<\/a> by Waaark (<a href=\"https:\/\/codepen.io\/waaark\">@waaark<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Waaark<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS, JS (jQuery)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/waaark\/pen\/VbgwEM\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"51-awesome-buttons\">#51 Awesome Buttons<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"441\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"ExQeNxb\" data-user=\"astitva2009\" style=\"height: 441px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/astitva2009\/pen\/ExQeNxb\">\n  Awesome Buttons<\/a> by Astitva2009 (<a href=\"https:\/\/codepen.io\/astitva2009\">@astitva2009<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Astitva2009<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/astitva2009\/pen\/ExQeNxb\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"52-awesome-button-hover-effect\">#52 Awesome Button Hover Effect<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-theme-id=\"dark\" data-slug-hash=\"XWZNaqO\" data-user=\"Devang-Bajpai\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/Devang-Bajpai\/pen\/XWZNaqO\">\n  Awesome  Button Hover Effect<\/a> by Devang Bajpai (<a href=\"https:\/\/codepen.io\/Devang-Bajpai\">@Devang-Bajpai<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Devang Bajpai<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/Devang-Bajpai\/pen\/XWZNaqO\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"53-button-love-4-2019\">#53 Button Love #4 &#8211; 2019<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"wNweoa\" data-user=\"punitweb\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/punitweb\/pen\/wNweoa\">\n  Button Love #4 &#8211; 2019<\/a> by punit chawla (<a href=\"https:\/\/codepen.io\/punitweb\">@punitweb<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">punitweb<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/punitweb\/pen\/wNweoa\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-682\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"54-button-hover-with-slide-animation\">#54 Button hover with slide animation<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"370\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"yLKBBNJ\" data-user=\"Ajeet_Kumar\" style=\"height: 370px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/Ajeet_Kumar\/pen\/yLKBBNJ\">\n  Button hover with slide animation , click Buttons using pure css button<\/a> by Ajeet Kumar (<a href=\"https:\/\/codepen.io\/Ajeet_Kumar\">@Ajeet_Kumar<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Ajeet Kumar<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/Ajeet_Kumar\/pen\/yLKBBNJ\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"55-70s-css-button\">#55 70s CSS Button<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"387\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"pRdeja\" data-user=\"halvo\" style=\"height: 387px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/halvo\/pen\/pRdeja\">\n  70s CSS Button<\/a> by Jordan Halvorsen (<a href=\"https:\/\/codepen.io\/halvo\">@halvo<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">halvo<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/halvo\/pen\/pRdeja\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"56-button-love-4-2019\">#56 Button Love #4 &#8211; 2019<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-default-tab=\"result\" data-slug-hash=\"wNweoa\" data-user=\"punitweb\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/punitweb\/pen\/wNweoa\">\n  Button Love #4 &#8211; 2019<\/a> by punit chawla (<a href=\"https:\/\/codepen.io\/punitweb\">@punitweb<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">punit chawla<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/punitweb\/pen\/wNweoa\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"57-css-button-animation\">#57 CSS Button Animation<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"661\" data-default-tab=\"result\" data-slug-hash=\"wvGNzmw\" data-user=\"yohaanchokhany\" style=\"height: 661px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/yohaanchokhany\/pen\/wvGNzmw\">\n  CSS Button Animation<\/a> by Yohaan Chokhany (<a href=\"https:\/\/codepen.io\/yohaanchokhany\">@yohaanchokhany<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Yohaan Chokhany<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS, JS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/yohaanchokhany\/pen\/wvGNzmw\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"58-css-button-pending-success-fail-animation\">#58 CSS Button Pending\/Success\/Fail Animation<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"439\" data-default-tab=\"result\" data-slug-hash=\"wJLjgB\" data-user=\"fxm90\" style=\"height: 439px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/fxm90\/pen\/wJLjgB\">\n  CSS Button Pending \/ Success \/ Fail Animation<\/a> by Felix M. (<a href=\"https:\/\/codepen.io\/fxm90\">@fxm90<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Felix M.<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS), JS (Babel)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/fxm90\/pen\/wJLjgB\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"59-css-button-transitions\">#59 CSS Button transitions<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"499\" data-default-tab=\"result\" data-slug-hash=\"dGybQW\" data-user=\"RobinTreur\" style=\"height: 499px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/RobinTreur\/pen\/dGybQW\">\n  CSS Button transitions<\/a> by Robin Treur (<a href=\"https:\/\/codepen.io\/RobinTreur\">@RobinTreur<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Robin Treur<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/RobinTreur\/pen\/dGybQW\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"60-neon-buttons\">#60 Neon Buttons<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"291\" data-default-tab=\"result\" data-slug-hash=\"BaxJNjw\" data-user=\"nP-NIHAD-PASA-\" style=\"height: 291px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/nP-NIHAD-PASA-\/pen\/BaxJNjw\">\n  Untitled<\/a> by Np|Nihad Pasa (<a href=\"https:\/\/codepen.io\/nP-NIHAD-PASA-\">@nP-NIHAD-PASA-<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Np|Nihad Pasa<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/nP-NIHAD-PASA-\/pen\/BaxJNjw\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"61-pure-css-button-hover-animation\">#61 Pure CSS button hover animation<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"415\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"VwzxmNN\" data-user=\"afa34\" style=\"height: 415px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/afa34\/pen\/VwzxmNN\">\n  Pure CSS button hover animation<\/a> by afa (<a href=\"https:\/\/codepen.io\/afa34\">@afa34<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">afa<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/afa34\/pen\/VwzxmNN\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"62-home-button-hover-effect-03\">#62 Home Button Hover Effect #03<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"gOYrxrq\" data-user=\"Eslam_Refa3y\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/Eslam_Refa3y\/pen\/gOYrxrq\">\n  Button Hover Effect #03<\/a> by Eslam (<a href=\"https:\/\/codepen.io\/Eslam_Refa3y\">@Eslam_Refa3y<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Eslam<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/Eslam_Refa3y\/pen\/gOYrxrq\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"63-css-button-hover-1-stretchable-button\">#63 Css Button Hover #1 &#8211; Stretchable Button<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"ayyrzQ\" data-user=\"thelaazyguy\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/thelaazyguy\/pen\/ayyrzQ\">\n  Css Button Hover #1 &#8211; Stretchable Button<\/a> by thelaazyguy (<a href=\"https:\/\/codepen.io\/thelaazyguy\">@thelaazyguy<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">thelaazyguy<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/thelaazyguy\/pen\/ayyrzQ\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"64-supah-awesome-css-button\">#64 Supah Awesome CSS Button<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"LNRzvo\" data-user=\"kylelavery88\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/kylelavery88\/pen\/LNRzvo\">\n  Supah Awesome CSS Button<\/a> by Kyle Lavery (<a href=\"https:\/\/codepen.io\/kylelavery88\">@kylelavery88<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Kyle Lavery<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/kylelavery88\/pen\/LNRzvo\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"65-pure-css-button-fill-effects\">#65 Pure CSS Button fill effects<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"332\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"yzpmZz\" data-user=\"pieter-biesemans\" style=\"height: 332px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/pieter-biesemans\/pen\/yzpmZz\">\n  Pure CSS Button fill effects<\/a> by Pieter Biesemans (<a href=\"https:\/\/codepen.io\/pieter-biesemans\">@pieter-biesemans<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Pieter Biesemans<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/pieter-biesemans\/pen\/yzpmZz\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"66-css-button-hovers\">#66 CSS Button Hovers<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"391\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"XKxmOB\" data-user=\"MitchES\" style=\"height: 391px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/MitchES\/pen\/XKxmOB\">\n  CSS Button Hovers<\/a> by Mitchell Swaffield (<a href=\"https:\/\/codepen.io\/MitchES\">@MitchES<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">MitchES<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/MitchES\/pen\/XKxmOB\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"67-css-button-ripple\">#67 CSS button ripple<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"POxQMw\" data-user=\"pjwdev\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/pjwdev\/pen\/POxQMw\">\n  CSS button ripple<\/a> by paul (<a href=\"https:\/\/codepen.io\/pjwdev\">@pjwdev<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">pjwdev<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS <\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/pjwdev\/pen\/POxQMw\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"68-pure-css-button-hover-animation\">#68 Pure CSS button hover animation<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"357\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"VwzxmNN\" data-user=\"afa34\" style=\"height: 357px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/afa34\/pen\/VwzxmNN\">\n  Pure CSS button hover animation<\/a> by afa (<a href=\"https:\/\/codepen.io\/afa34\">@afa34<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">afa34<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/afa34\/pen\/VwzxmNN\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"69-pure-css-button-switch\">#69 Pure CSS button switch<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"kdGMQP\" data-user=\"seyedi\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/seyedi\/pen\/kdGMQP\">\n  Pure CSS button switch<\/a> by Mojtaba Seyedi (<a href=\"https:\/\/codepen.io\/seyedi\">@seyedi<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">seyedi<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/seyedi\/pen\/kdGMQP\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"70-3d-css-buttons\">#70 3D CSS Buttons<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"366\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"KwpGNa\" data-user=\"kanishkkunal\" style=\"height: 366px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/kanishkkunal\/pen\/KwpGNa\">\n  3D CSS Buttons<\/a> by Kanishk Kunal (<a href=\"https:\/\/codepen.io\/kanishkkunal\">@kanishkkunal<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">kanishkkunal<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/kanishkkunal\/pen\/KwpGNa\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"71-codepen-home-button-hover-effect-05\">#71 CodePen Home Button Hover Effect #05<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"NWKNvvq\" data-user=\"Eslam_Refa3y\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/Eslam_Refa3y\/pen\/NWKNvvq\">\n  Button Hover Effect #05<\/a> by Eslam (<a href=\"https:\/\/codepen.io\/Eslam_Refa3y\">@Eslam_Refa3y<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Eslam_Refa3y<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/Eslam_Refa3y\/pen\/NWKNvvq\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"72-css-button-hover-effect\">#72 CSS button hover effect<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"375\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"XpOoJe\" data-user=\"sfoxy\" style=\"height: 375px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/sfoxy\/pen\/XpOoJe\">\n  CSS button hover effect<\/a> by Julia (<a href=\"https:\/\/codepen.io\/sfoxy\">@sfoxy<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">sfoxy<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/sfoxy\/pen\/XpOoJe\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"73-20-button-hover-effects\">#73 20 Button Hover Effects<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"365\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"zKQoXx\" data-user=\"RRoberts\" style=\"height: 365px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/RRoberts\/pen\/zKQoXx\">\n  20 Button Hover Effects<\/a> by Rosa (<a href=\"https:\/\/codepen.io\/RRoberts\">@RRoberts<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">RRoberts<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/RRoberts\/pen\/zKQoXx\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"74-simple-css-button\">#74 Simple CSS Button<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"515\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"dMmqeN\" data-user=\"designil\" style=\"height: 515px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/designil\/pen\/dMmqeN\">\n  Designil.com CSS Button Tutorial 1<\/a> by designil (<a href=\"https:\/\/codepen.io\/designil\">@designil<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">designil<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/designil\/pen\/dMmqeN\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"75-css-button-with-glowing-background\">#75 CSS Button with Glowing Background<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"NgQqVj\" data-user=\"dhanishgajjar\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/dhanishgajjar\/pen\/NgQqVj\">\n  CSS Button with Glowing Background<\/a> by Dhanish (<a href=\"https:\/\/codepen.io\/dhanishgajjar\">@dhanishgajjar<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">dhanishgajjar<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/dhanishgajjar\/pen\/NgQqVj\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"76-button-hover-effects\">#76 Button Hover Effects<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"440\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"wBBLXx\" data-pen-title=\"Button Hover Effects\" data-user=\"kjbrum\" style=\"height: 440px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/kjbrum\/pen\/wBBLXx\">\n  Button Hover Effects<\/a> by Kyle Brumm (<a href=\"https:\/\/codepen.io\/kjbrum\">@kjbrum<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">kjbrum<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS), jQuery<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/kjbrum\/pen\/wBBLXx\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"77-css-button\">#77 CSS Button<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"JjqXeMW\" data-pen-title=\"CSS Button\" data-user=\"matthewmorete\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/matthewmorete\/pen\/JjqXeMW\">\n  CSS Button<\/a> by Matthew Morete (<a href=\"https:\/\/codepen.io\/matthewmorete\">@matthewmorete<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">matthewmorete<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/matthewmorete\/pen\/JjqXeMW\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"78-css-button-border-animation-on-hover\">#78 CSS Button Border Animation on Hover<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"GRaqmMq\" data-pen-title=\"CSS Button Border Animation on Hover\" data-user=\"ricoJei8ht\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/ricoJei8ht\/pen\/GRaqmMq\">\n  CSS Button Border Animation on Hover<\/a> by RicoJEi8hT (<a href=\"https:\/\/codepen.io\/ricoJei8ht\">@ricoJei8ht<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">ricoJei8ht<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/ricoJei8ht\/pen\/GRaqmMq\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"79-css-button-animation\">#79 CSS &#8211; button animation<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"YzbzNVP\" data-pen-title=\"CSS - button animation\" data-user=\"Amerey\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/Amerey\/pen\/YzbzNVP\">\n  CSS &#8211; button animation<\/a> by Amerey (<a href=\"https:\/\/codepen.io\/Amerey\">@Amerey<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Amerey<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/Amerey\/pen\/YzbzNVP\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"80-css-button-with-ring-indicator-effect\">#80 CSS Button with ring indicator effect<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"GRLyrWR\" data-pen-title=\"CSS Button with ring indicator effect.\" data-user=\"Raza-the-bashful\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/Raza-the-bashful\/pen\/GRLyrWR\">\n  CSS Button with ring indicator effect.<\/a> by Raza (<a href=\"https:\/\/codepen.io\/Raza-the-bashful\">@Raza-the-bashful<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Raza-the-bashful<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/Raza-the-bashful\/pen\/GRLyrWR\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"81-moving-border\">#81 Moving border<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"Yzbmedx\" data-pen-title=\"NEW CSS BUTTOn\" data-user=\"Kyon-Jordan\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/Kyon-Jordan\/pen\/Yzbmedx\">\n  NEW CSS BUTTOn<\/a> by Kyon Jordan (<a href=\"https:\/\/codepen.io\/Kyon-Jordan\">@Kyon-Jordan<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Kyon-Jordan<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/Kyon-Jordan\/pen\/Yzbmedx\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"82-disturbed-button\">#82 Disturbed button<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"400\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"ExzBMjW\" data-pen-title=\"Untitled\" data-user=\"milad-ahmadipour\" style=\"height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/milad-ahmadipour\/pen\/ExzBMjW\">\n  Untitled<\/a> by milad ahmadipour (<a href=\"https:\/\/codepen.io\/milad-ahmadipour\">@milad-ahmadipour<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">milad-ahmadipour<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/milad-ahmadipour\/pen\/ExzBMjW\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"83-glowing-rainbow-pulsant\">#83 Glowing rainbow pulsant<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"ZENdqZb\" data-pen-title=\"Glowing rainbow pulsant\" data-user=\"Mattia-Abate\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/Mattia-Abate\/pen\/ZENdqZb\">\n  Glowing rainbow pulsant<\/a> by Mattia Abate (<a href=\"https:\/\/codepen.io\/Mattia-Abate\">@Mattia-Abate<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Mattia-Abate<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/Mattia-Abate\/pen\/ZENdqZb\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"84-simple-af\">#84 Simple AF<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"300\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"ZENRObK\" data-pen-title=\"css button\" data-user=\"Fatima-khondoker\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/Fatima-khondoker\/pen\/ZENRObK\">\n  css button<\/a> by Fatima khondoker (<a href=\"https:\/\/codepen.io\/Fatima-khondoker\">@Fatima-khondoker<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Fatima-khondoker<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/Fatima-khondoker\/pen\/ZENRObK\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"85-animated-css-buttons\">#85 Animated CSS Buttons)<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"563\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"RwmMLre\" data-pen-title=\"Animated CSS Button\" data-user=\"Yashi-Singh\" style=\"height: 563px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/Yashi-Singh\/pen\/RwmMLre\">\n  Animated CSS Button<\/a> by Yashi Singh (<a href=\"https:\/\/codepen.io\/Yashi-Singh\">@Yashi-Singh<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">Yashi-Singh<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/Yashi-Singh\/pen\/RwmMLre\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"86-simple-button\">#86 Simple Button<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"183\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"pomamjy\" data-pen-title=\"BOTON CON TRASLADO A SECCION GOOGLE \" data-user=\"izar23\" style=\"height: 183px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/izar23\/pen\/pomamjy\">\n  BOTON CON TRASLADO A SECCION GOOGLE <\/a> by Izar (<a href=\"https:\/\/codepen.io\/izar23\">@izar23<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAutor<br>\n\t\t\t\t<span class=\"second-line\">izar23<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tProgrammiert in<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/izar23\/pen\/pomamjy\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<p>Welcher gef\u00e4llt Dir am besten? Wenn Du auch Buttons auf Codepen ver\u00f6ffentlicht hast, lass es mich gerne wissen, damit ich diese Liste erweitern kann! \ud83d\ude42<\/p>\n\n\n\n<p class=\"info-notice info\">Hinweis: Alle Buttons sind alle auf <a rel=\"noreferrer noopener\" aria-label=\"codepen.io (\u00f6ffnet in neuem Tab)\" href=\"https:\/\/codepen.io\" target=\"_blank\">codepen.io<\/a> ver\u00f6ffentlicht und <span style=\"text-decoration: underline;\">nicht von mir<\/span>.<\/p>\n\n\n\n<p>Schau dir auch meine anderen CSS Sammlungen an:<\/p>\n\n\n<div class=\"post-container post-preview-container nw1200 category-shortcut \">\n<div class=\"entry-item\" id=\"post-9809\">\n\t<div class=\"post-entry\">\n\t\t\n\n\t\t\n\t\t<a onClick=\"_paq.push(['trackEvent', 'Link', 'Click', 'Category (image) Excerpt for &quot;30+ CSS Cards&quot;']);\" href=\"https:\/\/webdeasy.de\/css-cards\/\" class=\"header-container shorter \" title=\"30+ CSS Cards\" style=\"background-image: url(https:\/\/webdeasy.de\/wp-content\/uploads\/2024\/07\/css-cards-350x150.jpg)\"><\/a>\n\t\t<div class=\"content-container shorter\">\n\t\t\t<span><a onClick=\"_paq.push(['trackEvent', 'Link', 'Click', 'Category (headline) Excerpt for &quot;30+ CSS Cards&quot;']);\" title=\"30+ CSS Cards\" href=\"https:\/\/webdeasy.de\/css-cards\/\">30+ CSS Cards<\/a><\/span>\t\t<\/div>\n\t<\/div>\n<\/div>\n<div class=\"entry-item\" id=\"post-8780\">\n\t<div class=\"post-entry\">\n\t\t\n\n\t\t\n\t\t<a onClick=\"_paq.push(['trackEvent', 'Link', 'Click', 'Category (image) Excerpt for &quot;30 CSS Background Pattern&quot;']);\" href=\"https:\/\/webdeasy.de\/css-background-pattern\/\" class=\"header-container shorter \" title=\"30 CSS Background Pattern\" style=\"background-image: url(https:\/\/webdeasy.de\/wp-content\/uploads\/2023\/08\/css-background-pattern-1-350x150.jpg)\"><\/a>\n\t\t<div class=\"content-container shorter\">\n\t\t\t<span><a onClick=\"_paq.push(['trackEvent', 'Link', 'Click', 'Category (headline) Excerpt for &quot;30 CSS Background Pattern&quot;']);\" title=\"30 CSS Background Pattern\" href=\"https:\/\/webdeasy.de\/css-background-pattern\/\">30 CSS Background Pattern<\/a><\/span>\t\t<\/div>\n\t<\/div>\n<\/div>\n<div class=\"entry-item\" id=\"post-6931\">\n\t<div class=\"post-entry\">\n\t\t\n\n\t\t\n\t\t<a onClick=\"_paq.push(['trackEvent', 'Link', 'Click', 'Category (image) Excerpt for &quot;33 CSS Formulare (Design Inspirationen)&quot;']);\" href=\"https:\/\/webdeasy.de\/css-formulare\/\" class=\"header-container shorter \" title=\"33 CSS Formulare (Design Inspirationen)\" style=\"background-image: url(https:\/\/webdeasy.de\/wp-content\/uploads\/2022\/02\/css-forms-350x150.jpg)\"><\/a>\n\t\t<div class=\"content-container shorter\">\n\t\t\t<span><a onClick=\"_paq.push(['trackEvent', 'Link', 'Click', 'Category (headline) Excerpt for &quot;33 CSS Formulare (Design Inspirationen)&quot;']);\" title=\"33 CSS Formulare (Design Inspirationen)\" href=\"https:\/\/webdeasy.de\/css-formulare\/\">33 CSS Formulare (Design Inspirationen)<\/a><\/span>\t\t<\/div>\n\t<\/div>\n<\/div>\n<div class=\"entry-item\" id=\"post-4919\">\n\t<div class=\"post-entry\">\n\t\t\n\n\t\t\n\t\t<a onClick=\"_paq.push(['trackEvent', 'Link', 'Click', 'Category (image) Excerpt for &quot;15 geniale CSS Hamburger Menus (+ Animationen)&quot;']);\" href=\"https:\/\/webdeasy.de\/css-hamburger-menus\/\" class=\"header-container shorter \" title=\"15 geniale CSS Hamburger Menus (+ Animationen)\" style=\"background-image: url(https:\/\/webdeasy.de\/wp-content\/uploads\/2021\/11\/css-hamburger-menus-350x150.jpg)\"><\/a>\n\t\t<div class=\"content-container shorter\">\n\t\t\t<span><a onClick=\"_paq.push(['trackEvent', 'Link', 'Click', 'Category (headline) Excerpt for &quot;15 geniale CSS Hamburger Menus (+ Animationen)&quot;']);\" title=\"15 geniale CSS Hamburger Menus (+ Animationen)\" href=\"https:\/\/webdeasy.de\/css-hamburger-menus\/\">15 geniale CSS Hamburger Menus (+ Animationen)<\/a><\/span>\t\t<\/div>\n\t<\/div>\n<\/div>\n<div class=\"entry-item\" id=\"post-3771\">\n\t<div class=\"post-entry\">\n\t\t\n\n\t\t\n\t\t<a onClick=\"_paq.push(['trackEvent', 'Link', 'Click', 'Category (image) Excerpt for &quot;60 CSS Ladeanimationen&quot;']);\" href=\"https:\/\/webdeasy.de\/css-ladeanimationen\/\" class=\"header-container shorter \" title=\"60 CSS Ladeanimationen\" style=\"background-image: url(https:\/\/webdeasy.de\/wp-content\/uploads\/2020\/10\/loading-animations-350x150.jpg)\"><\/a>\n\t\t<div class=\"content-container shorter\">\n\t\t\t<span><a onClick=\"_paq.push(['trackEvent', 'Link', 'Click', 'Category (headline) Excerpt for &quot;60 CSS Ladeanimationen&quot;']);\" title=\"60 CSS Ladeanimationen\" href=\"https:\/\/webdeasy.de\/css-ladeanimationen\/\">60 CSS Ladeanimationen<\/a><\/span>\t\t<\/div>\n\t<\/div>\n<\/div>\n<div class=\"entry-item\" id=\"post-3444\">\n\t<div class=\"post-entry\">\n\t\t\n\n\t\t\n\t\t<a onClick=\"_paq.push(['trackEvent', 'Link', 'Click', 'Category (image) Excerpt for &quot;35 HTML 404 Seiten Templates&quot;']);\" href=\"https:\/\/webdeasy.de\/html-css-404-seiten-templates\/\" class=\"header-container shorter \" title=\"35 HTML 404 Seiten Templates\" style=\"background-image: url(https:\/\/webdeasy.de\/wp-content\/uploads\/2020\/06\/404-pages-350x150.jpg)\"><\/a>\n\t\t<div class=\"content-container shorter\">\n\t\t\t<span><a onClick=\"_paq.push(['trackEvent', 'Link', 'Click', 'Category (headline) Excerpt for &quot;35 HTML 404 Seiten Templates&quot;']);\" title=\"35 HTML 404 Seiten Templates\" href=\"https:\/\/webdeasy.de\/html-css-404-seiten-templates\/\">35 HTML 404 Seiten Templates<\/a><\/span>\t\t<\/div>\n\t<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Bist du auf der Suche nach neuen CSS Buttons f\u00fcr deine Webseite? Perfekt! Dann bist du hier genau richtig! Schau dir meine Sammlung von CSS [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2322,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[127,582],"tags":[],"class_list":["post-1206","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-css-collection","entry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>86 tolle CSS Buttons<\/title>\n<meta name=\"description\" content=\"Sammlung von 86 CSS Buttons mit Animationen: Entdecke tolle CSS Buttons in verschiedenen Designs und Stilen!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdeasy.de\/css-buttons\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"86 tolle CSS Buttons\" \/>\n<meta property=\"og:description\" content=\"Sammlung von 86 CSS Buttons mit Animationen: Entdecke tolle CSS Buttons in verschiedenen Designs und Stilen!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdeasy.de\/css-buttons\/\" \/>\n<meta property=\"og:site_name\" content=\"webdeasy.de\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-08T14:22:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-04T14:52:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdeasy.de\/wp-content\/uploads\/2019\/06\/top-css-buttons.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1400\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Lorenz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webdeasy\" \/>\n<meta name=\"twitter:site\" content=\"@webdeasy\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lorenz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"9\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/webdeasy.de\\\/css-buttons\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webdeasy.de\\\/css-buttons\\\/\"},\"author\":{\"name\":\"Lorenz\",\"@id\":\"https:\\\/\\\/webdeasy.de\\\/#\\\/schema\\\/person\\\/42d507baee923988d706529843341fd7\"},\"headline\":\"86 tolle CSS Buttons\",\"datePublished\":\"2019-06-08T14:22:40+00:00\",\"dateModified\":\"2025-04-04T14:52:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webdeasy.de\\\/css-buttons\\\/\"},\"wordCount\":2864,\"commentCount\":12,\"publisher\":{\"@id\":\"https:\\\/\\\/webdeasy.de\\\/#\\\/schema\\\/person\\\/42d507baee923988d706529843341fd7\"},\"image\":{\"@id\":\"https:\\\/\\\/webdeasy.de\\\/css-buttons\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webdeasy.de\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/top-css-buttons.jpg\",\"articleSection\":[\"CSS\",\"CSS Collections\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webdeasy.de\\\/css-buttons\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webdeasy.de\\\/css-buttons\\\/\",\"url\":\"https:\\\/\\\/webdeasy.de\\\/css-buttons\\\/\",\"name\":\"86 tolle CSS Buttons\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webdeasy.de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webdeasy.de\\\/css-buttons\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webdeasy.de\\\/css-buttons\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webdeasy.de\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/top-css-buttons.jpg\",\"datePublished\":\"2019-06-08T14:22:40+00:00\",\"dateModified\":\"2025-04-04T14:52:39+00:00\",\"description\":\"Sammlung von 86 CSS Buttons mit Animationen: Entdecke tolle CSS Buttons in verschiedenen Designs und Stilen!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webdeasy.de\\\/css-buttons\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webdeasy.de\\\/css-buttons\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/webdeasy.de\\\/css-buttons\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webdeasy.de\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/top-css-buttons.jpg\",\"contentUrl\":\"https:\\\/\\\/webdeasy.de\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/top-css-buttons.jpg\",\"width\":1400,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webdeasy.de\\\/css-buttons\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webdeasy.de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\\\/\\\/webdeasy.de\\\/category\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"86 tolle CSS Buttons\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/webdeasy.de\\\/#website\",\"url\":\"https:\\\/\\\/webdeasy.de\\\/\",\"name\":\"webdeasy.de\",\"description\":\"Backend-Development, DevOps &amp; Co.\",\"publisher\":{\"@id\":\"https:\\\/\\\/webdeasy.de\\\/#\\\/schema\\\/person\\\/42d507baee923988d706529843341fd7\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/webdeasy.de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/webdeasy.de\\\/#\\\/schema\\\/person\\\/42d507baee923988d706529843341fd7\",\"name\":\"Lorenz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/webdeasy.de\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/cropped-webdeasy-logo-3.png\",\"url\":\"https:\\\/\\\/webdeasy.de\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/cropped-webdeasy-logo-3.png\",\"contentUrl\":\"https:\\\/\\\/webdeasy.de\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/cropped-webdeasy-logo-3.png\",\"width\":190,\"height\":190,\"caption\":\"Lorenz\"},\"logo\":{\"@id\":\"https:\\\/\\\/webdeasy.de\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/cropped-webdeasy-logo-3.png\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/webdeasy\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"86 tolle CSS Buttons","description":"Sammlung von 86 CSS Buttons mit Animationen: Entdecke tolle CSS Buttons in verschiedenen Designs und Stilen!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webdeasy.de\/css-buttons\/","og_locale":"de_DE","og_type":"article","og_title":"86 tolle CSS Buttons","og_description":"Sammlung von 86 CSS Buttons mit Animationen: Entdecke tolle CSS Buttons in verschiedenen Designs und Stilen!","og_url":"https:\/\/webdeasy.de\/css-buttons\/","og_site_name":"webdeasy.de","article_published_time":"2019-06-08T14:22:40+00:00","article_modified_time":"2025-04-04T14:52:39+00:00","og_image":[{"width":1400,"height":600,"url":"https:\/\/webdeasy.de\/wp-content\/uploads\/2019\/06\/top-css-buttons.jpg","type":"image\/jpeg"}],"author":"Lorenz","twitter_card":"summary_large_image","twitter_creator":"@webdeasy","twitter_site":"@webdeasy","twitter_misc":{"Verfasst von":"Lorenz","Gesch\u00e4tzte Lesezeit":"9\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/webdeasy.de\/css-buttons\/#article","isPartOf":{"@id":"https:\/\/webdeasy.de\/css-buttons\/"},"author":{"name":"Lorenz","@id":"https:\/\/webdeasy.de\/#\/schema\/person\/42d507baee923988d706529843341fd7"},"headline":"86 tolle CSS Buttons","datePublished":"2019-06-08T14:22:40+00:00","dateModified":"2025-04-04T14:52:39+00:00","mainEntityOfPage":{"@id":"https:\/\/webdeasy.de\/css-buttons\/"},"wordCount":2864,"commentCount":12,"publisher":{"@id":"https:\/\/webdeasy.de\/#\/schema\/person\/42d507baee923988d706529843341fd7"},"image":{"@id":"https:\/\/webdeasy.de\/css-buttons\/#primaryimage"},"thumbnailUrl":"https:\/\/webdeasy.de\/wp-content\/uploads\/2019\/06\/top-css-buttons.jpg","articleSection":["CSS","CSS Collections"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdeasy.de\/css-buttons\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdeasy.de\/css-buttons\/","url":"https:\/\/webdeasy.de\/css-buttons\/","name":"86 tolle CSS Buttons","isPartOf":{"@id":"https:\/\/webdeasy.de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdeasy.de\/css-buttons\/#primaryimage"},"image":{"@id":"https:\/\/webdeasy.de\/css-buttons\/#primaryimage"},"thumbnailUrl":"https:\/\/webdeasy.de\/wp-content\/uploads\/2019\/06\/top-css-buttons.jpg","datePublished":"2019-06-08T14:22:40+00:00","dateModified":"2025-04-04T14:52:39+00:00","description":"Sammlung von 86 CSS Buttons mit Animationen: Entdecke tolle CSS Buttons in verschiedenen Designs und Stilen!","breadcrumb":{"@id":"https:\/\/webdeasy.de\/css-buttons\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdeasy.de\/css-buttons\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/webdeasy.de\/css-buttons\/#primaryimage","url":"https:\/\/webdeasy.de\/wp-content\/uploads\/2019\/06\/top-css-buttons.jpg","contentUrl":"https:\/\/webdeasy.de\/wp-content\/uploads\/2019\/06\/top-css-buttons.jpg","width":1400,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/webdeasy.de\/css-buttons\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdeasy.de\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/webdeasy.de\/category\/css\/"},{"@type":"ListItem","position":3,"name":"86 tolle CSS Buttons"}]},{"@type":"WebSite","@id":"https:\/\/webdeasy.de\/#website","url":"https:\/\/webdeasy.de\/","name":"webdeasy.de","description":"Backend-Development, DevOps &amp; Co.","publisher":{"@id":"https:\/\/webdeasy.de\/#\/schema\/person\/42d507baee923988d706529843341fd7"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdeasy.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":["Person","Organization"],"@id":"https:\/\/webdeasy.de\/#\/schema\/person\/42d507baee923988d706529843341fd7","name":"Lorenz","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/webdeasy.de\/wp-content\/uploads\/2019\/09\/cropped-webdeasy-logo-3.png","url":"https:\/\/webdeasy.de\/wp-content\/uploads\/2019\/09\/cropped-webdeasy-logo-3.png","contentUrl":"https:\/\/webdeasy.de\/wp-content\/uploads\/2019\/09\/cropped-webdeasy-logo-3.png","width":190,"height":190,"caption":"Lorenz"},"logo":{"@id":"https:\/\/webdeasy.de\/wp-content\/uploads\/2019\/09\/cropped-webdeasy-logo-3.png"},"sameAs":["https:\/\/x.com\/webdeasy"]}]}},"_links":{"self":[{"href":"https:\/\/webdeasy.de\/wp-json\/wp\/v2\/posts\/1206","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdeasy.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdeasy.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdeasy.de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdeasy.de\/wp-json\/wp\/v2\/comments?post=1206"}],"version-history":[{"count":3,"href":"https:\/\/webdeasy.de\/wp-json\/wp\/v2\/posts\/1206\/revisions"}],"predecessor-version":[{"id":9913,"href":"https:\/\/webdeasy.de\/wp-json\/wp\/v2\/posts\/1206\/revisions\/9913"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdeasy.de\/wp-json\/wp\/v2\/media\/2322"}],"wp:attachment":[{"href":"https:\/\/webdeasy.de\/wp-json\/wp\/v2\/media?parent=1206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdeasy.de\/wp-json\/wp\/v2\/categories?post=1206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdeasy.de\/wp-json\/wp\/v2\/tags?post=1206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}