CSS 斜体按钮

Hello,大家好,今天给大家推荐一个css的小样式 斜体按钮!是不是听起来很酷呢,让我们一起看看吧!

首先是html:

javascript 复制代码
<button>斜体按钮</button>

接下来是css样式:

javascript 复制代码
* {
			margin: 0;
			padding: 0;
			text-align: center;
		}
 
		button {
			width: 200px;
			height: 80px;
			color: white;
			margin-top: 100px;
			background-color: black;
			font-size: 25px;
			border-radius: 15px 0;
			position: relative;
			transform: skew(-30deg);
		}
		button::before{
			content: '';
			position: absolute;
			width: 20px;
			height: 20px;
			background: radial-gradient(circle at 0 0, transparent, transparent 20px, black 20px);
			bottom: 0;
			left: -22px;
		}
		button::after{
			content: '';
			position: absolute;
			width: 20px;
			height: 20px;
			background: radial-gradient(circle at 100% 100%, transparent, transparent 20px, black 20px);
			top: 0;
			right: -22px;
		}

最后大家看下效果图展示:

相关推荐
kiros_wang2 小时前
RDB关系数据库实战:增删改查、事务、分页、版本迁移
前端
用户1733598075372 小时前
纯前端 PDF 双面打印避坑指南:翻页顺序错了整个白印?
前端·javascript·vue.js
庖丁解牛2 小时前
第四课:循环,让电脑重复做事(4)
前端
数据掘金2 小时前
用户路径分析的会话切分与节点聚合实现
前端
木棉软糖2 小时前
JDBC 读 ResultSet 读到一半,报 stream closed
java·mysql·spring
代码猎人2 小时前
前端怎么搭建项目基础架构
前端
lichenyang4532 小时前
Promise 基础与进阶:状态规则、链式错误处理和异步执行顺序
前端
Amos_Web2 小时前
Rspack 源码解析(二十五):CssParserAndGenerator 如何把 CSS 变成可 Tree Shaking 的模块
前端·rust·前端框架
狂奔的sherry2 小时前
JRuby 多线程反引号偶发 127:GC 提前释放了 posix_spawn 的 argv
java·linux·ruby·gc·jruby
咖啡八杯2 小时前
异常体系设计:三类策略(i18n code、message、受检异常)
java·架构·代码规范