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 分钟前
Vue2源码,响应式原理-对象
前端
小钰能吃三碗饭2 分钟前
打造类 RainbowKit 的 Solana 钱包连接套件
前端·web3·区块链
Anlici6 分钟前
如何优化十万数据的浏览体验?从性能、监控到布局全面拆解
前端·性能优化
utmhikari6 分钟前
【日常随笔】万字长文,如何用pyside6开发一个python桌面工具
前端·python·pyqt
JustHappy13 分钟前
「Versakit 0.3 重磅发布」 两个月开发成果全揭!
前端·javascript·vue.js
carterwu18 分钟前
是否使用原子式tailwindcss 代替css module?
css
chenqi22 分钟前
WebGPU和WebLLM:在浏览器中解锁端侧大模型的未来
前端·人工智能
Lingxing23 分钟前
Vue组件树:从设计到实现的全方位指南 🚀
前端·vue.js
玖玖passion25 分钟前
leader:请你用Protobuf进行数据交互🥲
前端
Linruoxin28 分钟前
为什么给 body 设置背景会直接铺满整个视口?
前端·css