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

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

相关推荐
逃逸线LOF4 小时前
服务网关Gateway
java·运维·gateway
灿飞屋4 小时前
Kotlin与Java虚拟机四:函数
java·python·kotlin·安卓·android jetpack
古茗前端团队4 小时前
由 key 引发的思考
前端·javascript·react.js
kyriewen4 小时前
我扫了 422 个仓库,近一半 CI 在裸装依赖
前端·javascript·程序员
鹏多多5 小时前
AI 到底能不能独立做个产品?我拿一个小程序验证了
前端·微信小程序·ai编程
火山引擎开发者社区5 小时前
构建专属的飞书群开发助手,AgentKit Studio 一键部署 DeepSeek Harness Super-Agent
前端
阡陌数智5 小时前
Claude API新版本重大变更与安全升级指南
java·linux·安全
学长毕设7 小时前
基于SpringBoot的野生动物公益保护平台设计与实现-附源码
java·spring boot·后端
啾咪orJIUMI7 小时前
Vue 3 + 高德地图封装实战:点位、区域、Loca 流光与 Vue 信息窗体
前端·vue.js
掘金者阿豪7 小时前
AI数据库不只是向量检索:从数据语义到库内智能计算的技术演进
前端