.u-btn--1 { cursor: pointer; display: inline-flex; font-weight: 400; justify-content: flex-start; align-items: stretch; background: transparent; border-radius: 0; height: 48px; width: fit-content; /* Button variables */ --button-text-background: #222f30; --button-text-background-hover: #cef79e; --button-text-color: #fff; --button-text-color-hover: #222f30; --button-blob-background: #cef79e; --button-blob-background-hover: #222f30; --button-blob-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' viewBox='0 0 10 10'%3E%3Cpath fill='%23222F30' d='M7.703 5.8H.398V4.6h7.305l-3.36-3.36.855-.84 4.8 4.8-4.8 4.8-.855-.84 3.36-3.36Z'/%3E%3C/svg%3E"); --button-blob-icon-image-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' viewBox='0 0 10 10'%3E%3Cpath fill='%23fff' d='M7.703 5.8H.398V4.6h7.305l-3.36-3.36.855-.84 4.8 4.8-4.8 4.8-.855-.84 3.36-3.36Z'/%3E%3C/svg%3E"); --button-blob-icon-position: center left -150%, center left 50%; --button-blob-icon-position-hover: center left 50%, center left 150%; --button-blob-scale: 0.875; --button-transition-duration: 0.6s; --button-transition-timing-function: cubic-bezier(.25, 1, .5, 1); } .u-btn--1 svg { top: 0; left: 0; position: absolute; width: 100%; height: 100%; z-index: 1; } .u-btn--1 svg path { transition: fill var(--button-transition-duration) var(--button-transition-timing-function); } .u-btn--1 .btn_label { align-items: center; background: var(--button-text-background); border-radius: 12px 0 0 12px; color: var(--button-text-color); display: inline-flex; font-family: "Roboto Mono", monospace; font-size: max(.75rem, min(calc(.75rem + .002*(100vw - 27.5rem)), .875rem)); justify-content: flex-start; line-height: 1; margin-right: 16px; overflow: visible; padding: 8px 8px 8px 20px; position: relative; text-transform: uppercase; transition: background-color var(--button-transition-duration) var(--button-transition-timing-function), color var(--button-transition-duration) var(--button-transition-timing-function), margin-inline-end var(--button-transition-duration) var(--button-transition-timing-function), padding-right var(--button-transition-duration) var(--button-transition-timing-function); } .u-btn--1 .label_corner { background: transparent; display: block; position: absolute; top: 0; right: -16px; bottom: 0; width: 18px; height: 100%; } .u-btn--1 .label_corner svg path { fill: var(--button-text-background); } .u-btn--1 .btn_icon { background-color: transparent; display: inline-flex; overflow: hidden; padding: 10px; position: relative; width: 51px; height: 100%; transform: scale(1); transform-origin: center right; transition: transform var(--button-transition-duration) var(--button-transition-timing-function); } .u-btn--1 .btn_icon:before { background-color: transparent; background-image: var(--button-blob-icon-image-hover), var(--button-blob-icon-image); background-repeat: no-repeat; background-position: var(--button-blob-icon-position); background-size: 10px 10px; content: ""; top: 0; left: 4px; position: absolute; width: calc(100% - 4px); height: 100%; transition: background-position var(--button-transition-duration) var(--button-transition-timing-function); z-index: 2; } .u-btn--1 .btn_icon svg path { fill: var(--button-blob-background); } @media (hover: hover) and (pointer: fine) { .u-btn--1:hover .btn_label { background-color: var(--button-text-background-hover); color: var(--button-text-color-hover); margin-right: 12px; padding-right: 14px; } .u-btn--1:hover .label_corner svg path { fill: var(--button-text-background-hover); } .u-btn--1:hover .btn_icon { transform: scale(var(--button-blob-scale)); } .u-btn--1:hover .btn_icon:before { background-position: var(--button-blob-icon-position-hover); } .u-btn--1:hover .btn_icon svg path { fill: var(--button-blob-background-hover); } }