scss 圆形css down-caret按钮

Posted 2021-05-18

a.btn {
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 0px 0 rgba(0,0,0,0.25);
        color: #fff;
        display: inline-block;
        padding: 6px 30px 8px;
        position: relative;
        text-decoration: none;
        transition: all 0.1s 0s ease-out;
    }

a.toggle-info {
        border-radius: 32px;
        width: 32px;
        height: 32px;
        position: absolute;
        padding: 0;
        left: 15px;
        top: 0;

        span {
                    background: #fff;
                    display: block;
                    height: 2px;
                    position: absolute;
                    top: 16px;
                    transition: all 0.15s 0s ease-out;
                    width: 12px;
        }

        span.left {
                    right: 14px;
                    transform: rotate(45deg);
        }
        span.right {
                    left: 14px;
                    transform: rotate(-45deg);
        }
            }

/* HTML

<a href="#" class="toggle-info btn">
  <span class="left"></span>
  <span class="right"></span>
</a>

*/