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

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

相关推荐
itslife8 分钟前
vite 源码 - 创建 ws 服务
前端·javascript
chools15 分钟前
学习问题日记-4
java
懒人Ethan30 分钟前
解决一个C# 在Framework 4.5反序列化的问题
java·前端·c#
用户14567756103731 分钟前
Excel合并数据太麻烦?这个神器3秒搞定,打工人必备!
前端
2351643 分钟前
【MySQL】MVCC:从核心原理到幻读解决方案
java·数据库·后端·sql·mysql·缓存
西洼工作室1 小时前
前端混入与组合实战指南
前端
扶苏-su1 小时前
Java---注解
java·注解
YQ_ZJH1 小时前
Spring Boot 如何校验前端传递的参数
前端·spring boot·后端
报错小能手1 小时前
linux学习笔记(18)进程间通讯——共享内存
linux·服务器·前端
魔云连洲1 小时前
深入解析:Object.prototype.toString.call() 的工作原理与实战应用
前端·javascript·原型模式