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

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

相关推荐
摇滚侠13 小时前
MyBatis 入门到项目实战 MyBatis 的缓存 56-61
java·缓存·mybatis
feixing_fx13 小时前
选择器的威力——深入理解优先级计算与层叠规则
开发语言·前端·css·前端框架·html
让我上个超影吧13 小时前
Claude code:Hooks
java·数据库·ai编程
代码小库13 小时前
【2026前端转 AI 全栈指南】第 1 章:前言 · 后端架构 · 章节导览
前端·人工智能·架构
RH23121113 小时前
2026.6.8Linux
java·数据库·中间件
晓131313 小时前
【Cocos Creator 3.x】篇——第四章 子系统
前端·javascript·游戏引擎
ikoala13 小时前
Codex 怎么买、怎么充值?先把这两套计费搞清楚
前端·javascript·后端
于指尖飞舞13 小时前
java后端面试题(多线程极简)
java·开发语言
IT 行者13 小时前
GitHub Spec Kit 实战(四):读懂和干预 /speckit.plan——AI 最自由发挥的一步
java·人工智能·github·ai编程·claude
wuhen_n13 小时前
RAG 优化实战:检索精准度提升全方案
前端·langchain·ai编程