css实现伸缩按钮悬浮动画效果代码-html代码-BFW代码库

css实现伸缩按钮悬浮动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现伸缩按钮悬浮动画效果代码，鼠标放上去，两个按钮此消彼长。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        .buttons {
          display: flex;
          width: 380px;
          gap: 10px;
          --b: 5px;   /* the border thickness */
          --h: 1.8em; /* the height */
        }
        
        .buttons button {
          --_c: #88C100;
          flex: calc(1.25 + var(--_s,0));
          min-width: 0;
          font-size: 40px;
          font-weight: bold;
          height: var(--h);
          cursor: pointer;
          color: var(--_c);
          border: var(--b) solid var(--_c);
          background: 
            conic-gradient(at calc(100% - 1.3*var(--b)) 0,var(--_c) 209deg, #0000 211deg) 
            border-box;
          clip-path: polygon(0 0,100% 0,calc(100% - 0.577*var(--h)) 100%,0 100%);
          padding: 0 calc(0.288*var(--h)) 0 0;
          margin: 0 calc(-0.288*var(--h)) 0 0;
          box-sizing: border-box;
          transition: flex .4s;
        }
        .buttons button + button {
          --_c: #FF003C;
          flex: calc(.75 + var(--_s,0));
          background: 
            conic-gradient(from -90deg at calc(1.3*var(--b)) 100%,var(--_c) 119deg, #0000 121deg) 
            border-box;
          clip-path: polygon(calc(0.577*var(--h)) 0,100% 0,.........完整代码请登录后点击上方下载按钮下载查看