{"id":257,"date":"2026-05-23T18:51:04","date_gmt":"2026-05-23T23:51:04","guid":{"rendered":"https:\/\/tuxgafas.com\/?page_id=257"},"modified":"2026-05-23T19:28:19","modified_gmt":"2026-05-24T00:28:19","slug":"boton-4","status":"publish","type":"page","link":"https:\/\/tuxgafas.com\/index.php\/boton-4\/","title":{"rendered":"BOTON 4"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"257\" class=\"elementor elementor-257\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e603bad e-flex e-con-boxed parallax_section_no qode_elementor_container_no e-con e-parent\" data-id=\"e603bad\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b39d159 elementor-widget elementor-widget-html\" data-id=\"b39d159\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<main>\r\n\t<button>\r\n\t\t<span>Hover<\/span>\r\n\t\t<div><\/div>\r\n\t<\/button>\r\n\t<button>\r\n\t\t<span>Hover<\/span>\r\n\t\t<div><\/div>\r\n\t<\/button>\r\n<\/main>\r\n\r\n\r\n\r\n<div class=\"support\">\r\n\t<a href=\"https:\/\/twitter.com\/DevLoop01\" target=\"_blank\"><i class=\"fab fa-twitter-square\"><\/i><\/a>\r\n\t<a href=\"https:\/\/dribbble.com\/devloop01\" target=\"_blank\"><i class=\"fab fa-dribbble\"><\/i><\/a>\r\n<\/div>\r\n\r\n<style>\r\n\r\n* {\r\n\tbox-sizing: border-box;\r\n\tmargin: 0;\r\n\tposition: 0;\r\n}\r\n\r\nbody {\r\n\twidth: 100%;\r\n\theight: 100vh;\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tbackground: #f6f6f6;\r\n}\r\n\r\nmain {\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\tflex-wrap: wrap;\r\n}\r\n\r\nbutton {\r\n\t--width: 120px;\r\n\t--height: 50px;\r\n\tborder: 0;\r\n\tposition: relative;\r\n\twidth: var(--width);\r\n\theight: var(--height);\r\n\tfont-size: 0.95rem;\r\n\tfont-family: \"Montserrat\";\r\n\tfont-weight: bold;\r\n\tmargin: 1rem;\r\n\tborder-radius: 0.5em;\r\n\tcursor: pointer;\r\n\toverflow: hidden;\r\n\tbackground: none;\r\n\r\n\t&:nth-child(1) {\r\n\t\tbackground: rgb(255, 223, 208);\r\n\t\tcolor: rgb(255, 112, 46);\r\n\t}\r\n\t&:nth-child(2) {\r\n\t\tcolor: rgb(255, 112, 46);\r\n\t\tborder: 2px solid rgb(255, 112, 46);\r\n\t}\r\n\r\n\tspan {\r\n\t\tposition: relative;\r\n\t\tz-index: 2;\r\n\t\ttransition: color 200ms ease;\r\n\t}\r\n\tdiv {\r\n\t\tposition: absolute;\r\n\t\twidth: calc(3 * var(--width));\r\n\t\theight: calc(3 * var(--height));\r\n\t\tleft: 0;\r\n\t\ttop: 0;\r\n\t\ttransform: translate(-50%, -50%);\r\n\t\tborder-radius: 50%;\r\n\t\tbackground: rgb(255, 112, 46);\r\n\t\tclip-path: circle(0% at 50% 50%);\r\n\t\ttransition: clip-path 500ms ease;\r\n\t\tz-index: 1;\r\n\t}\r\n\t&:hover {\r\n\t\tspan {\r\n\t\t\tcolor: #fff;\r\n\t\t}\r\n\t\tdiv {\r\n\t\t\tclip-path: circle(100% at 50% 50%);\r\n\t\t}\r\n\t}\r\n}\r\n\r\n\r\n.support{\r\n\tposition: absolute;\r\n\tright: 10px;\r\n\tbottom: 10px;\r\n\tpadding: 10px;\r\n\tdisplay: flex;\r\n\ta{\r\n\t\tmargin: 0 10px;\r\n\t\tcolor: #333333;\r\n\t\tfont-size: 1.8rem;\r\n\t\tbackface-visibility: hidden;\r\n\t\ttransition: all 150ms ease;\r\n\t\t&:hover{\r\n\t\t\ttransform: scale3d(1.1);\r\n\t\t}\r\n\t}\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<script>\r\n    \r\n    console.clear();\r\n\r\nconst buttons = document.querySelectorAll(\"button\");\r\n\r\nbuttons.forEach((button) => {\r\n\tconst div = button.querySelector(\"div\");\r\n\t[\"mouseenter\", \"mouseleave\"].forEach((event) => {\r\n\t\tbutton.addEventListener(event, (e) => {\r\n\t\t\tdiv.style.left = `${e.offsetX}px`;\r\n\t\t\tdiv.style.top = `${e.offsetY}px`;\r\n\t\t});\r\n\t});\r\n});\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Hover Hover<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"content-type":"","rs_blank_template":"","rs_page_bg_color":"","slide_template_v7":"","footnotes":""},"class_list":["post-257","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tuxgafas.com\/index.php\/wp-json\/wp\/v2\/pages\/257","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tuxgafas.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tuxgafas.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tuxgafas.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tuxgafas.com\/index.php\/wp-json\/wp\/v2\/comments?post=257"}],"version-history":[{"count":31,"href":"https:\/\/tuxgafas.com\/index.php\/wp-json\/wp\/v2\/pages\/257\/revisions"}],"predecessor-version":[{"id":293,"href":"https:\/\/tuxgafas.com\/index.php\/wp-json\/wp\/v2\/pages\/257\/revisions\/293"}],"wp:attachment":[{"href":"https:\/\/tuxgafas.com\/index.php\/wp-json\/wp\/v2\/media?parent=257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}