css 写一个BUtton

265 阅读1分钟

css实现一个按钮,icon有可能在左边也有可能在右边

<button class="g-button left">
    <svg>这里是icon</svg>
    <div>这里是按钮文字</div>
</button>
.g-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
如果icon在左边
.g-button.left {
    svg {
        order: 1;
    }
    div {
        order: 2
    }
}
如果是在右边
.g-button.right {
    svg {
        order: 2;
    }
    div {
        order: 1;
    }
}

上面是 display: inline-flex 和order的粗略示例写法。可以自己再试试看

display: inline 会引起各个Button 不对齐,可以在button上加一个: vertical-align: middle;