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 小时前
深入理解 MVCC:数据库并发控制的基石
java·数据库·mysql
仿生狮子13 小时前
🎼 从文本到交互界面——GenUI 的中庸之道
前端·vue.js·markdown
wuhen_n13 小时前
LangChain 核心:Chain 链式调用实现复杂 AI 任务
前端·langchain·ai编程
往上跑山13 小时前
【Agentic RL / 强化学习 / OPD】OpenClaw-RL 源码阅读
前端
文心快码BaiduComate13 小时前
从个人效能到组织资产:文心快码企业版Agent Hub上线,提升团队AI编程效能
前端·后端·程序员
凯瑟琳.奥古斯特13 小时前
力扣1235:加权区间调度最优解
java·python·算法·leetcode·职场和发展
想不到ID了14 小时前
第八篇: 登录注册功能实现
java·javascript
咖啡星人k14 小时前
从需求到交付:我用MonkeyCode的AI Agent完成了一个React数据看板
前端·人工智能·react.js·monkeycode
sxlishaobin14 小时前
linux 自动清除日志 脚本
linux·服务器·前端
ZC跨境爬虫14 小时前
跟着 MDN 学CSS day_37:(从文档流到粘性定位的底层原理)
前端·javascript·css·ui·html