您的位置:首页 > Web前端 > CSS

CSS特殊按钮样式

2018-01-11 11:07 549 查看
这一周除了折线图,就是这个样式比较恶心了,UI效果是这样的;



关键的css就只有两行:

transform:skewX(-30deg);
border-top-left-radius: 10rpx;


第一行是向右倾斜30度,第二行是左上角加一个圆角。

细节代码我也贴上来吧,权当作自己的笔记

<view class="welcome">
...
<button class="submit"  formType="submit">
<view class="max">今日满员</view>
<view class="start-bg disable"></view>
</button>
</view>


.welcome .submit{
color: #FF6C71;
border: 1rpx #FF6C71 solid;
width: 672rpx;
height: 96rpx;
margin: 20rpx auto 26rpx auto;
background-color: white;
position: relative;
line-height:96rpx;
}
.welcome button.submit::after{
border: none;
}
.welcome .submit .max{
font-size: 34rpx;
width: 180rpx;
position: absolute;
left: 0;
}
.welcome button.submit .disable{
background: -prefix-linear-gradient(left, #EB8A84, #978886);
background: linear-gradient(to right, #EB8A84, #978886);
}
.welcome .submit .start-bg{
background: -prefix-linear-gradient(left, #ffaf9a, #ff4c64);
background: linear-gradient(to right, #FF8D85, #ff4c64);
border-top-left-radius: 10rpx;
transform:skewX(-30deg);
width: 492rpx;
position: absolute;
right: -26rpx;
top: 0;
bottom: 0;
}
.welcome .submit .start{
font-size: 42rpx;
width: 492rpx;
color: white;
position: absolute;
right: -26rpx;
box-sizing: border-box;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  CSS