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

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

相关推荐
再学一点就睡2 小时前
前端网络实战手册:15个高频工作场景全解析
前端·网络协议
num_killer2 小时前
小白的Langchain学习
java·python·学习·langchain
C_心欲无痕2 小时前
有限状态机在前端中的应用
前端·状态模式
C_心欲无痕3 小时前
前端基于 IntersectionObserver 更流畅的懒加载实现
前端
candyTong3 小时前
深入解析:AI 智能体(Agent)是如何解决问题的?
前端·agent·ai编程
期待のcode3 小时前
Java虚拟机的运行模式
java·开发语言·jvm
程序员老徐3 小时前
Tomcat源码分析三(Tomcat请求源码分析)
java·tomcat
柳杉3 小时前
建议收藏 | 2026年AI工具封神榜:从Sora到混元3D,生产力彻底爆发
前端·人工智能·后端
weixin_462446233 小时前
使用 Puppeteer 设置 Cookies 并实现自动化分页操作:前端实战教程
运维·前端·自动化
a程序小傲3 小时前
京东Java面试被问:动态规划的状态压缩和优化技巧
java·开发语言·mysql·算法·adb·postgresql·深度优先