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

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

相关推荐
芒克芒克几秒前
《Git分支实战:从创建到合并的全流程》
java·git
武藤一雄1 分钟前
[WPF] 万字拆解依赖属性与附加属性
前端·microsoft·c#·.net·wpf
羊吖2 分钟前
Vue文件预览组件实战:高性能懒加载
前端·javascript·vue.js
代码or搬砖2 分钟前
如何创建一个vue项目(详细步骤)
前端·javascript·vue.js
Chloeis Syntax3 分钟前
MySQL初阶学习日记(5)--- 联合查询
java·笔记·学习·mysql
赛贝维权申诉3 分钟前
亚马逊爆款美国外观专利落地,家居/儿童/宠物等品类亚马逊卖家谨防侵权投诉!
前端·javascript·宠物
ArabySide4 分钟前
【Spring Boot】用Spring AOP优雅实现横切逻辑复用
java·spring boot·后端
snow123f4 分钟前
Lambda 表达式怎么用
java·开发语言·线程
梓䈑6 分钟前
【C++】C++11(右值引用和移动语义、可变参数模板 和 包装器)
java·开发语言·c++
深海蓝山7 分钟前
WebSocket(java版)服务示例
java·websocket·网络协议