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

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

相关推荐
IT_陈寒7 分钟前
Java序列化踩坑记:对象循环引用让我加班两小时
前端·人工智能·后端
lgcgkCQ16 分钟前
【AI 转型实战 1】SpringAI 入门:搭建基础大模型对话能力
java·ai·agent·rag·spring ai·mcp·langchain4j
Wang's Blog21 分钟前
Java 项目实战:交友项目 - 用户体系集成总结
java·开发语言·交友
Acro22 分钟前
快给macOS 上的Grok Bot换一套皮肤
前端
flash俊杰24 分钟前
双引擎 OCR 编排:逐页判定、视觉优先、partial 语义与三层超时
前端
计算机魔术师25 分钟前
Reddit 每周被 Google 偷走 100 万次点击,CEO 摊牌了
前端
前端繁华如梦26 分钟前
用 React Three Fiber 做一栋能编辑的教学楼数字孪生
前端
学到老活到老28 分钟前
第 24 集:配置文件写了 80,Spring Boot 为什么读到 90?
java·后端·spring
前端繁华如梦31 分钟前
用 React Three Fiber 做一套智慧医院数字孪生:编辑器、大屏和 BIM 浏览器
前端
tongyiixiaohuang1 小时前
供应商主数据同步实战:从易快报到金蝶云星空的单一策略落地
java·网络·数据库