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;
		}

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

相关推荐
W.Buffer3 分钟前
Java并发工具类详解:Semaphore、CyclicBarrier与CountDownLatch
java·开发语言
林恒smileZAZ6 分钟前
CSS3 超实用属性:pointer-events (可穿透图层的鼠标事件)
前端·计算机外设·css3
鼠鼠我捏,要死了捏10 分钟前
深度解析JVM GC调优实践指南
java·jvm·gc
IT·陈寒12 分钟前
当 JVM 开始“内卷”:一次性能优化引发的 GC 战争
java·jvm·性能优化
云中雾丽13 分钟前
flutter中 NotificationListener 详细使用指南
前端
大杯咖啡13 分钟前
一篇文章搞懂,浏览器强缓存以及协商缓存
前端·javascript
王六岁14 分钟前
# 🐍 前端开发 0 基础学 Python 入门指南: Python 元组和映射类型深入指南
前端·javascript·python
不会吃萝卜的兔子16 分钟前
spring微服务宏观概念
java·spring·微服务
_志哥_17 分钟前
多行文本超出,中间显示省略号的终极方法(适配多语言)
前端·javascript·vue.js
王六岁18 分钟前
# 🐍 前端开发 0 基础学 Python 入门指南:常用的数据类型和列表
前端·javascript·python