.wp-block-custom-bubble-button { display:inline-flex; width:auto; } .btn-group { display:flex; grid-column-gap:3em; grid-row-gap:3em; justify-content:center; font-size:2em; } .btn-bubble-arrow { border-radius:10em; justify-content:center; align-items:center; font-size:1em; text-decoration:none; display:flex; position:relative; --bubble-arrow-hover-bg:#8573ff; } .btn-bubble-arrow:focus-visible { outline:2px solid currentColor; outline-offset:0.35em; } .btn-bubble-arrow__arrow { color:#131313; background-color:#efeeec; border-radius:10em; flex-flow:row; justify-content:center; align-items:center; width:3.75em; height:3.75em; display:flex; position:relative; transition:transform 0.735s cubic-bezier(0.625, 0.05, 0, 1); transform:scale(0) rotate(0.001deg); transform-origin:left; } .btn-bubble-arrow__arrow.is--duplicate { margin-left:-10px !important; z-index:2; background-color:#efeeec; position:absolute; right:0.3em; transform:scale(1) rotate(0.001deg); transform-origin:right; } .btn-bubble-arrow__arrow-svg { width:40%; transition:transform 0.735s cubic-bezier(0.625, 0.05, 0, 1); transform:rotate(0.001deg); } .btn-bubble-arrow__content { color:#efeeec; background-color:rgba(0, 0, 0, 0.4); border-radius:10em; justify-content:center; align-items:center; height:3.75em; padding-left:2em; padding-right:2em; display:flex; position:relative; transition:transform 0.735s cubic-bezier(0.625, 0.05, 0, 1); transform:translateX(-3.75em) rotate(0.001deg); } .btn-bubble-arrow__content-text { line-height:1; } .btn-bubble-arrow:hover .btn-bubble-arrow__content { transform:translateX(0em) rotate(0.001deg); } .btn-bubble-arrow:hover .btn-bubble-arrow__arrow-svg { transform:rotate(-45deg); } .btn-bubble-arrow:hover .btn-bubble-arrow__arrow { transform:scale(1) rotate(0.001deg); } .btn-bubble-arrow:hover .btn-bubble-arrow__arrow.is--duplicate { transform:scale(0) rotate(0.001deg); } .btn-bubble-arrow:hover .btn-bubble-arrow__arrow:not(.is--duplicate) { background-color:var(--bubble-arrow-hover-bg, #8573ff); }