css样式美化 button斜切角

首页 » 收集 » 正文内容

css样式美化 button斜切角

寻梦xunm| 664| 收集

3年前

超过1144天温馨提示

本文最后更新于2022年02月12日，已超过1144天没有更新，若内容或图片失效，请留言反馈。

CSS代码

.rantangle {
    width:100%;
    box-sizing:border-box;
    text-align:center;
}
.rantangle button {
    width:20%;
    border:0;
    border-radius:5px;
    color:#FFF;
    padding:10px 0;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
}
.btnleft {
    background:linear-gradient(-59deg,transparent 21px,#d12826 0) top right;
    background-size:100% 100%;
    background-repeat:no-repeat;
}
.btnright {
    background:linear-gradient(120deg,transparent 21px,#04A95B 0) top left;
    background-size:100% 100%;
    background-repeat:no-repeat;
    margin-left:-25px;
}

html代码

<div class="rantangle">
    <button type="button" class="btnleft">按钮1</button>
    <button type="button" class="btnright">按钮2</button>
</div>

截图

请输入图片描述

css 美化样式按钮

本站相关资源来自互联网用户收集发布，仅供用于学习和交流。如有侵权之处，请联系站长并出示相关证明以便删除，敬请谅解！

0 赞 or 打赏

喜欢就打赏一点

Web全栈高级视频教程第十期

WordPress给博客评论框添加一言随机语录

服务器服务器

教程207 typecho164 代码151 模板127 源码118 php90 css75 主题75 图片70 游戏61 原创49 html44 js43 免费39 程序35 动漫34 攻略31 视频31 手办30 周边30 美化28 特效24 评论23 拍摄23 插件19 导航19 样式19 手游18 函数17 音乐17 加载16 开发15 软件14 wp14 mysql13 福利13 标签12 主页12 简单12 头像12 文章11 emlog11 吐槽11 应用10 表情10 自动10 页面10 农村9 白嫖9 微信9 接口9 网址9 字体8 编辑器8 列表8 切换8 原神8 网盘8 小程序8 优化8 更新8 api8 时间7 博客7 链接7 Vue7

服务器服务器