visual-design/theme-chalk/v-gradient-button.css

A Component Library for Vue 3

@charset "UTF-8";.gradient-button{width:168px;height:40px;position:relative;color:#fff;font-size:18px;border-radius:20px;transition:all .5s ease-in-out;background:rgba(5,21,36,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.gradient-button::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;padding:2px;border-radius:20px;background:linear-gradient(270deg,var(--vi-color-warning) 20%,var(--vi-color-primary) 60%,var(--vi-color-warning) 20%);--mask-bg:linear-gradient(red, red);--mask-clip:content-box,padding-box;-webkit-mask-image:var(--mask-bg),var(--mask-bg);-webkit-mask-origin:var(--mask-clip);-webkit-mask-clip:var(--mask-clip);mask-composite:exclude;-webkit-mask-composite:destination-out}.gradient-button:hover{filter:brightness(1.5)}