.hoverbutton{display:-webkit-flex;display:flex}.hoverbutton *{box-sizing:border-box;&::before,&::after { box-sizing:border-box; }}.hoverbutton button{position:relative;display:flex;cursor:pointer;outline:none;border:0;vertical-align:middle;text-decoration:none;background:0 0;padding:0;font-size:inherit;font-family:inherit;&.call-to-action { height: auto; .circle { transition: all 0.45s cubic-bezier(0.65,0,.076,1); position: absolute; display: block; margin: 0; width: 30px; height: 30px; top: -2.5px; background: var(--IILS-TITLE-color); border-radius: 999px; .icon { transition: all 0.45s cubic-bezier(0.65,0,.076,1); position: absolute; top: 0; bottom: 0; margin: auto; &.arrow { transition: all 0.45s cubic-bezier(0.65,0,.076,1); left: 6px; width: 12px; height: 2px; background: none; &::before { position: absolute; content: ''; left:2px; top: -4px; width: 10px; height: 10px; border-top: 2px solid var(--IILS-BACKGROUND-1-color); border-right: 2px solid var(--IILS-BACKGROUND-1-color); transform: rotate(45deg); } } } } .circle-placeholder{ position: relative; width: 56px; } .button-text { transition: all 0.45s cubic-bezier(0.65,0,.076,1); position: relative; top: 0px; left: -17px; right: 0; bottom: 0; color: var(--IILS-TITLE-color); font-weight: 600; line-height: 1.6; text-align: center; } } &:hover { .circle { width: 100%; .icon { &.arrow { background: var(--IILS-BACKGROUND-1-color); transform: translate(10px, 0); } } } .button-text { color: var(--IILS-BACKGROUND-1-color); } }}.hoverbutton{grid-area:main;align-self:center;justify-self:center}.checkbox-wrapper-colormode .tgl{display:none}.checkbox-wrapper-colormode .tgl,.checkbox-wrapper-colormode .tgl:after,.checkbox-wrapper-colormode .tgl:before,.checkbox-wrapper-colormode .tgl *,.checkbox-wrapper-colormode .tgl *:after,.checkbox-wrapper-colormode .tgl *:before,.checkbox-wrapper-colormode .tgl+.tgl-btn{box-sizing:border-box}.checkbox-wrapper-colormode .tgl::selection,.checkbox-wrapper-colormode .tgl:after::selection,.checkbox-wrapper-colormode .tgl:before::selection,.checkbox-wrapper-colormode .tgl *::selection,.checkbox-wrapper-colormode .tgl *:after::selection,.checkbox-wrapper-colormode .tgl *:before::selection,.checkbox-wrapper-colormode .tgl+.tgl-btn::selection{background:0 0}.checkbox-wrapper-colormode .tgl+.tgl-btn{outline:0;display:block;width:57px;height:25px;position:relative;cursor:pointer;user-select:none;font-size:14px;color:#fff}.checkbox-wrapper-colormode .tgl+.tgl-btn:after,.checkbox-wrapper-colormode .tgl+.tgl-btn:before{position:relative;display:block;content:"";aspect-ratio:1;height:100%}.checkbox-wrapper-colormode .tgl+.tgl-btn:after{left:0}.checkbox-wrapper-colormode .tgl+.tgl-btn:before{display:inline;position:absolute}.checkbox-wrapper-colormode .tgl:checked+.tgl-btn:after{left:60%}.checkbox-wrapper-colormode .tgl-ios+.tgl-btn{background:var(--IILS-LOGO-BLUE-color);border-radius:20rem;padding:2px;transition:all .4s ease}body.light .checkbox-wrapper-colormode .tgl-ios+.tgl-btn{box-shadow:inset 0 0 0 1px rgba(0,0,0,5%)}body.dark .checkbox-wrapper-colormode .tgl-ios+.tgl-btn{box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}.checkbox-wrapper-colormode .tgl-ios+.tgl-btn:after{border-radius:2em;background:#fff;transition:left .3s cubic-bezier(.175,.885,.32,1.275),padding .3s ease,margin .3s ease;box-shadow:0 1px 2px rgba(0,0,0,.2)}.checkbox-wrapper-colormode .tgl-ios+.tgl-btn:before{content:"\f494";font-family:bootstrap-icons;left:30px;transition:left .3s cubic-bezier(.175,.885,.32,1.275)}.checkbox-wrapper-colormode .tgl-ios+.tgl-btn:active{box-shadow:inset 0 0 0 30px rgba(0,0,0,.1)}.checkbox-wrapper-colormode .tgl-ios+.tgl-btn:active:after{padding-right:.4em}.checkbox-wrapper-colormode .tgl-ios:checked+.tgl-btn{background:var(--IILS-LOGO-YELLOW-color)}.checkbox-wrapper-colormode .tgl-ios:checked+.tgl-btn:active{box-shadow:inset 0 0 0 30px rgba(0,0,0,.1)}.checkbox-wrapper-colormode .tgl-ios:checked+.tgl-btn:active:after{margin-left:-.4em}.checkbox-wrapper-colormode .tgl-ios:checked+.tgl-btn:before{content:"\f5a1";font-family:bootstrap-icons;left:10px}.glow-button{appearance:none;outline:none;border:none;font-family:inherit;font-size:16px;font-weight:500;border-radius:999px;position:relative;line-height:24px;cursor:pointer;padding:0;margin:0;background:0 0;z-index:1;.gradient { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; &:before { content: ''; position: absolute; top: 0; left: 0; right: 0; transform: scale(1.2) translateY(-44px) rotate(0deg) translateZ(0); padding-bottom: 100%; border-radius: 50%; animation: rotate linear 4s infinite; } } span { z-index: 1; position: relative; display: block; padding: 6px 20px; box-sizing: border-box; width: fit-content; min-width: 124px; border-radius: inherit; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); &:before { content: ''; position: absolute; left: -16px; top: -16px; transform: translate(var(--pointer-x, 0px), var(--pointer-y, 0px)) translateZ(0); width: 32px; height: 32px; border-radius: 50%; background-color: var(--button-glow, transparent); opacity: var(--button-glow-opacity, 0); transition: opacity var(--button-glow-duration, .5s); filter: blur(20px); } } &:hover { --button-glow-opacity: 1; --button-glow-duration: .25s; }}body.dark .glow-button{--button-shadow:rgba(var(--IILS-TITLE-rgba), 0.08);--button-shine-left:rgba(11, 0, 163, 0.5);--button-shine-middle:rgba(182, 183, 255, 0.65);--button-shine-right:rgba(255, 233, 108, 0.65);--button-glow-start:#4000ff;--button-glow-end:#ffd500d3;color:var(--IILS-TITLE-color);box-shadow:0 6px 20px var(--button-shadow);.gradient { -webkit-mask-image: -webkit-radial-gradient(white, black); transform: scaleY(1.02) scaleX(1.005) rotate(-.35deg); &:before { background: linear-gradient(90deg, var(--button-shine-left), var(--button-shine-middle), var(--button-shine-right)); } } span { background: var(--IILS-BACKGROUND-1-color); background-image: radial-gradient(rgba(0 ,0, 0, 0.3), rgba(0 ,0, 0, 0.3)); }}body.light .glow-button{--button-shadow:rgba(0,0,0,.2);--button-shine-left:rgba(196, 188, 255, 0.85);--button-shine-middle:rgb(255, 255, 255);--button-shine-right:rgb(255, 227, 135);--button-glow-start:rgba(0, 4, 255, 0.4);--button-glow-end:rgba(255, 196, 0, 0.6);color:var(--IILS-TITLE-color);box-shadow:0 8px 30px var(--button-shadow);.gradient { -webkit-mask-image: -webkit-radial-gradient(white, black); transform: scaleY(1.04) scaleX(1.005) rotate(-.35deg); &:before { background: linear-gradient(90deg, var(--button-shine-left), var(--button-shine-middle), var(--button-shine-right)); } } span { background: #fff; background-image: linear-gradient(15deg, rgba(159, 167, 255, 0.2) 25%, #fff, rgba(255, 218, 155, 0.2) 70%); }}@keyframes rotate{to{transform:scale(1.2)translateY(-44px)rotate(360deg)translateZ(0)}}html{box-sizing:border-box;-webkit-font-smoothing:antialiased}*{box-sizing:inherit;&:before,&:after { box-sizing:inherit; }}.glow-button-container{display:flex;justify-content:center;align-items:center}