.btn-fill{align-items:center;background:#eee;color:#000;display:flex;font-size:24px;font-weight:600;gap:12px;justify-content:center;line-height:100%;overflow:hidden;padding:10px 24px;position:relative;text-decoration:none;transition:color .5s ease;z-index:0}.btn-fill:before{background:#000;content:"";height:100%;left:0;position:absolute;top:0;transition:width .5s ease;width:0;z-index:-1}.btn-fill:hover{color:#fff}.btn-fill:hover:before{width:100%}.btn-fill svg *{transition:fill .5s ease}.btn-fill:hover svg *{fill:#fff}.btn-fill.green{background:#212121;color:#fff}.btn-fill.green:before{background:#00dc84}.btn-fill.purple{background:#212121;color:#fff}.btn-fill.purple:before{background:#6f36ff}.btn-bottom-fill{position:relative}.btn-bottom-fill:before{background:#000;bottom:-4px;content:"";height:2px;position:absolute;transition:all .3s ease;width:0}.btn-bottom-fill:hover:before{width:100%}.btn-bottom-fill.green:before{background:#00dc84}.btn-bottom-fill.purple:before{background:#6f36ff}