{"id":64,"date":"2026-05-21T13:55:28","date_gmt":"2026-05-21T19:55:28","guid":{"rendered":"https:\/\/drcanepa.bloque9.design\/?page_id=64"},"modified":"2026-07-22T10:03:31","modified_gmt":"2026-07-22T16:03:31","slug":"custom-buttons","status":"publish","type":"page","link":"https:\/\/drcanepa.bloque9.design\/en\/custom-buttons\/","title":{"rendered":"Custom buttons"},"content":{"rendered":"<section class=\"section-main alignfull\" data-type=\"section-component\"><style>.gsbp-2ec104b{display:flex;flex-direction:column;justify-content:flex-start;row-gap:var(--gap-75);padding-top:var(--gap-50);padding-bottom:var(--gap-150);}<\/style>\n<div class=\"ca-800 gsbp-2ec104b\" data-type=\"content-area-component\">\n<h1>Custom Buttons<\/h1>\n\n\n<style>.gsbp-2d996af{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding-left:var(--gap-35);border-left-width:2px;border-left-style:solid;color:var(--body-light);}<\/style>\n<div class=\"gsbp-2d996af\">\n<p>Notar\u00e1s que todos los botones tienen dos clases:<\/p>\n\n\n\n<ul>\n<li><strong>La primer clase<\/strong> determina las caracter\u00edsticas generales de comportamiento del bot\u00f3n.<\/li>\n\n\n\n<li><strong>La segunda clase<\/strong> es para cambiar el color de los elementos que componen ese bot\u00f3n.<\/li>\n<\/ul>\n\n\n\n<p>Para cambiar el color de los elementos que componen un bot\u00f3n solo cambia el nombre a la segunda clase y define los nuevos colores.<\/p>\n<\/div>\n\n\n<style>.gsbp-2ae31e1{display:flex;flex-direction:column;justify-content:flex-start;row-gap:var(--gap-75);}<\/style>\n<div class=\"gsbp-2ae31e1\"><style>.gsbp-19a58e5{display:flex;flex-direction:row;row-gap:20px;justify-content:flex-start;align-items:center;flex-wrap:wrap;column-gap:var(--gap-35);}<\/style>\n<div class=\"gsbp-19a58e5\"><style>.gsbp-4c64b3b{color:var(--wp--preset--color--basecolor,#000001);border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#d3d3d3;width:100%;}<\/style>\n<div class=\"gsbp-4c64b3b\"><strong>Tipo:<\/strong> Custom Button<\/div>\n\n\n\n<a class=\"icswbtn-main icswbtn-default-color\">\n<div class=\"icswbtn-main__icon-div first\">\n<svg viewbox=\"0 0 896 1024\" width=\"896\" height=\"1024\" class=\"icswbtn-main__svg\"><path d=\"M436.202 76.202l-39.598 39.598c-9.372 9.372-9.372 24.568 0 33.942l310.26 310.258h-682.864c-13.254 0-24 10.746-24 24v56c0 13.254 10.746 24 24 24h682.864l-310.26 310.26c-9.372 9.372-9.372 24.568 0 33.942l39.598 39.598c9.372 9.372 24.568 9.372 33.942 0l418.828-418.828c9.372-9.372 9.372-24.568 0-33.942l-418.83-418.828c-9.372-9.374-24.568-9.374-33.94 0z\" \/><\/svg>\n<\/div>\n\n\n\n<div class=\"icswbtn-main__text-div\">\n<span class=\"icswbtn-main__span\">Button text<\/span>\n<\/div>\n\n\n\n<div class=\"icswbtn-main__icon-div last\">\n<svg viewbox=\"0 0 896 1024\" width=\"896\" height=\"1024\" class=\"icswbtn-main__svg\"><path d=\"M436.202 76.202l-39.598 39.598c-9.372 9.372-9.372 24.568 0 33.942l310.26 310.258h-682.864c-13.254 0-24 10.746-24 24v56c0 13.254 10.746 24 24 24h682.864l-310.26 310.26c-9.372 9.372-9.372 24.568 0 33.942l39.598 39.598c9.372 9.372 24.568 9.372 33.942 0l418.828-418.828c9.372-9.372 9.372-24.568 0-33.942l-418.83-418.828c-9.372-9.374-24.568-9.374-33.94 0z\" \/><\/svg>\n<\/div>\n<\/a>\n\n\n\n<a class=\"txtswbtn-main txtswbtn-default-color\">\n<div class=\"txtswbtn-main__text-wrapper\">\n<span class=\"txtswbtn-main__text default\">Button text<\/span>\n\n\n\n<span class=\"txtswbtn-main__text hover\">Button text<\/span>\n<\/div>\n<\/a>\n\n\n\n<a class=\"rdlfllbtn-main rdlfllbtn-default-color\">\n<span class=\"rdlfllbtn-main__text\">Button text<\/span>\n\n\n\n<span class=\"rdlfllbtn-main__overlay\"><\/span>\n<\/a>\n\n\n\n<a class=\"pillbtn-main pillbtn-default-color\">\n<span class=\"pillbtn-main__text\">Button text<\/span>\n\n\n\n<span class=\"pillbtn-main__overlay\"><\/span>\n\n\n\n<div class=\"pillbtn-main__icon-wrapper\">\n<svg viewbox=\"0 0 896 1024\" width=\"896\" height=\"1024\" class=\"pillbtn-main__svg\"><path d=\"M436.202 76.202l-39.598 39.598c-9.372 9.372-9.372 24.568 0 33.942l310.26 310.258h-682.864c-13.254 0-24 10.746-24 24v56c0 13.254 10.746 24 24 24h682.864l-310.26 310.26c-9.372 9.372-9.372 24.568 0 33.942l39.598 39.598c9.372 9.372 24.568 9.372 33.942 0l418.828-418.828c9.372-9.372 9.372-24.568 0-33.942l-418.83-418.828c-9.372-9.374-24.568-9.374-33.94 0z\" \/><\/svg>\n<\/div>\n<\/a>\n<\/div>\n\n\n<style>.gsbp-1f3b34b{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:wrap;column-gap:var(--gap-35);row-gap:20px;}<\/style>\n<div class=\"gsbp-1f3b34b\"><style>.gsbp-5360fd6{color:var(--wp--preset--color--basecolor,#000001);border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#d3d3d3;width:100%;}<\/style>\n<div class=\"gsbp-5360fd6\"><strong>Tipo:<\/strong> Custom Controls para Sliders<\/div>\n\n\n\n<div class=\"ccsimp-1 ccsimp1-default-color\">\n<button class=\"ccsimp-1__icon-wrapper left\">\n<svg viewbox=\"0 0 512 1024\" width=\"512\" height=\"1024\" class=\"ccsimp-1__svg\"><path d=\"M49.414 76.202l-39.598 39.596c-9.372 9.372-9.372 24.568 0 33.942l361.398 362.26-361.398 362.26c-9.372 9.372-9.372 24.568 0 33.942l39.598 39.598c9.372 9.372 24.568 9.372 33.942 0l418.828-418.828c9.372-9.372 9.372-24.568 0-33.942l-418.828-418.828c-9.374-9.374-24.57-9.374-33.942 0z\" \/><\/svg>\n<\/button>\n\n\n\n<button class=\"ccsimp-1__icon-wrapper right\">\n<svg viewbox=\"0 0 512 1024\" width=\"512\" height=\"1024\" class=\"ccsimp-1__svg\"><path d=\"M49.414 76.202l-39.598 39.596c-9.372 9.372-9.372 24.568 0 33.942l361.398 362.26-361.398 362.26c-9.372 9.372-9.372 24.568 0 33.942l39.598 39.598c9.372 9.372 24.568 9.372 33.942 0l418.828-418.828c9.372-9.372 9.372-24.568 0-33.942l-418.828-418.828c-9.374-9.374-24.57-9.374-33.942 0z\" \/><\/svg>\n<\/button>\n<\/div>\n\n\n\n<div class=\"ccsldicon-1 ccsldicon-default-color\">\n<button class=\"ccsldicon-1__icon-wrapper left\">\n<svg viewbox=\"0 0 896 1024\" width=\"896\" height=\"1024\" class=\"ccsldicon-1__svg default\"><path d=\"M436.202 76.202l-39.598 39.598c-9.372 9.372-9.372 24.568 0 33.942l310.26 310.258h-682.864c-13.254 0-24 10.746-24 24v56c0 13.254 10.746 24 24 24h682.864l-310.26 310.26c-9.372 9.372-9.372 24.568 0 33.942l39.598 39.598c9.372 9.372 24.568 9.372 33.942 0l418.828-418.828c9.372-9.372 9.372-24.568 0-33.942l-418.83-418.828c-9.372-9.374-24.568-9.374-33.94 0z\" \/><\/svg>\n\n\n\n<svg viewbox=\"0 0 896 1024\" width=\"896\" height=\"1024\" class=\"ccsldicon-1__svg hover\"><path d=\"M436.202 76.202l-39.598 39.598c-9.372 9.372-9.372 24.568 0 33.942l310.26 310.258h-682.864c-13.254 0-24 10.746-24 24v56c0 13.254 10.746 24 24 24h682.864l-310.26 310.26c-9.372 9.372-9.372 24.568 0 33.942l39.598 39.598c9.372 9.372 24.568 9.372 33.942 0l418.828-418.828c9.372-9.372 9.372-24.568 0-33.942l-418.83-418.828c-9.372-9.374-24.568-9.374-33.94 0z\" \/><\/svg>\n<\/button>\n\n\n\n<button class=\"ccsldicon-1__icon-wrapper right\">\n<svg viewbox=\"0 0 896 1024\" width=\"896\" height=\"1024\" class=\"ccsldicon-1__svg default\"><path d=\"M436.202 76.202l-39.598 39.598c-9.372 9.372-9.372 24.568 0 33.942l310.26 310.258h-682.864c-13.254 0-24 10.746-24 24v56c0 13.254 10.746 24 24 24h682.864l-310.26 310.26c-9.372 9.372-9.372 24.568 0 33.942l39.598 39.598c9.372 9.372 24.568 9.372 33.942 0l418.828-418.828c9.372-9.372 9.372-24.568 0-33.942l-418.83-418.828c-9.372-9.374-24.568-9.374-33.94 0z\" \/><\/svg>\n\n\n\n<svg viewbox=\"0 0 896 1024\" width=\"896\" height=\"1024\" class=\"ccsldicon-1__svg hover\"><path d=\"M436.202 76.202l-39.598 39.598c-9.372 9.372-9.372 24.568 0 33.942l310.26 310.258h-682.864c-13.254 0-24 10.746-24 24v56c0 13.254 10.746 24 24 24h682.864l-310.26 310.26c-9.372 9.372-9.372 24.568 0 33.942l39.598 39.598c9.372 9.372 24.568 9.372 33.942 0l418.828-418.828c9.372-9.372 9.372-24.568 0-33.942l-418.83-418.828c-9.372-9.374-24.568-9.374-33.94 0z\" \/><\/svg>\n<\/button>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"no-title","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"class_list":["post-64","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/drcanepa.bloque9.design\/en\/wp-json\/wp\/v2\/pages\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/drcanepa.bloque9.design\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/drcanepa.bloque9.design\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/drcanepa.bloque9.design\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/drcanepa.bloque9.design\/en\/wp-json\/wp\/v2\/comments?post=64"}],"version-history":[{"count":69,"href":"https:\/\/drcanepa.bloque9.design\/en\/wp-json\/wp\/v2\/pages\/64\/revisions"}],"predecessor-version":[{"id":1029,"href":"https:\/\/drcanepa.bloque9.design\/en\/wp-json\/wp\/v2\/pages\/64\/revisions\/1029"}],"wp:attachment":[{"href":"https:\/\/drcanepa.bloque9.design\/en\/wp-json\/wp\/v2\/media?parent=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}