uniapp样式

1.清除button默认样式

button {
    margin: unset;
    padding: unset;
}
button:after {
	border: unset;
}

2.箭头样式

html：

<div class="arrow-button arrow-button--t"></div>

css：

.arrow-button {
    /* Transparent background */
    background-color: transparent;

    /* Size */
    height: 12px;
    width: 12px;
}

.arrow-button--t {
    /* Edges */
    border-left: 1px solid #000000;
    border-top: 1px solid #000000;
    transform: translateY(25%) rotate(-45deg);
}

3.关闭按钮

html：

<button class="close-button">
    <div class="close-button__line close-button__line--first"></div>
    <div class="close-button__line close-button__line--second"></div>
</button>

css

.close-button {
    /* Reset */
    background-color: transparent;
    border-color: transparent;

    /* Cursor */
    cursor: pointer;

    /* Size */
    height: 3rem;
    width: 3rem;

    /* Used to position the inner */
    position: relative;
}

.close-button__line {
    /* Background color */
    background-color: #d1d5db;

    /* Position */
    position: absolute;

    /* Size */
    height: 1px;
    width: 100%;
}

.close-button__line--first {
    /* Position */
    left: 0px;
    top: 50%;
    transform: translate(0%, -50%) rotate(45deg);

    /* Size */
    height: 1px;
    width: 100%;
}

.close-button__line--second {
    /* Position */
    left: 50%;
    top: 0px;
    transform: translate(-50%, 0%) rotate(45deg);

    /* Size */
    height: 100%;
    width: 1px;
}

4.点击按钮

html

<view class="send">
		<button>赠送</button>
</view>

css

.send {
	position: absolute;
	bottom: 144rpx;
	left: 50%;
	transform: translate(-50%,-50%);
	button {
		width: 636rpx;
		height: 96rpx;
		line-height: 96rpx;
		background: linear-gradient(to right, #F7C056, #FF523B);
		border-radius: 60rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		margin: 0 auto;
	}
}