CSS特殊按钮样式
2018-01-11 11:07
549 查看
这一周除了折线图,就是这个样式比较恶心了,UI效果是这样的;
关键的css就只有两行:
第一行是向右倾斜30度,第二行是左上角加一个圆角。
细节代码我也贴上来吧,权当作自己的笔记
关键的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; }
相关文章推荐
- 自定义switch按钮样式,css实现
- 使用 CSS 去掉 iPhone 网页上按钮的超大圆角默认样式
- 鼠标放上会放大的CSS分页按钮样式
- WebApp按钮样式css实例
- 详解Bootstrap 定义按钮的样式(CSS)
- CSS按钮样式大全(经典)
- css 按钮样式
- CSS 样式书写规范+特殊符号
- 一个典型的CSS控制的按钮样式
- Bootstrap-全局css样式之按钮
- CSS 特殊样式
- css去掉iPhone、iPad默认按钮样式
- CSS自定义绿色复选框按钮样式
- 特殊样式 css
- css去掉iPhone、iPad默认按钮样式
- css去掉iPhone、iPad默认按钮样式
- 模仿“百度”及 改变按钮、文本框样式(CSS)
- CSS特殊样式(三)纯CSS实现各类气球泡泡对话框效果
- CSS按钮和超连接样式
- css input[type=file] 样式美化,input上传按钮美化