<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>index</title>
<style>
*{margin:0;padding:0;-webkit-appearance: none;}
button {
background-color: #fff;
border: 0;
outline: 0;
}
.button {
margin: 20px;
height: 32px;
border-radius: 25px;
padding: 0 15px;
font-size: 14px;
background-image: linear-gradient(-224deg, #D09445 0%, #FFDBA6 100%);
color: #fff;
}
.buttonGroup {
margin: 20px;
background-image: linear-gradient(-224deg, #D09445 0%, #FFDBA6 100%);
color: #fff;
height: 32px;
border-radius: 25px;
text-align: center;
white-space: nowrap;
width:84px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.buttonGroup span {
font-size: 28px;
transform: scale(0.5);
margin: 40px;
}
</style>
</head>
<body>
<p> 使用button标签</p>
<button type="button" class="button">立即支付</button>
<p> 父元素使用flex布局，子元素缩放50%</p>
<div class="buttonGroup">
<span>立即支付</span>
</div>
</body>
</html>代码在QQ中预览的效果如下所示，可以看到使用button实现的按钮感觉文字略偏上，使用flex布局实现的按钮，视觉上基本是垂直居中的：
参考原文链接： https://blog.csdn.net/u014085502/article/details/80391259