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

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

相关推荐
这个昵称不容易15 分钟前
考试报名系统的设计与实现(SpringBoot + MySQL + Vue 三角色平台)
java·springboot·毕设
前端双越老师19 分钟前
程序员 1v1 访谈系列第十三期:大龄已育空窗一年如何破局
前端·ai编程·全栈
Adellle30 分钟前
设计模式指南 (Java 版) ㊁
java·开发语言·设计模式
恋猫de小郭36 分钟前
Flutter 大小核优化又被回滚,然后又开新提案?
android·前端·flutter
MyBili39 分钟前
Chrome扩展开发入门:从零打造实用浏览器插件
前端·chrome·谷歌浏览器·效率工具·浏览器插件·前端入门·扩展开发
FungLeo43 分钟前
成为全栈·Vue 管理后台篇·Vue3 + Vite + Naive UI:后台工程基座怎么搭
前端·vue.js·ui·typescript·vite·前端工程化·biome
特立独行的猫A1 小时前
cj-tauri:用仓颉写桌面与鸿蒙 PC 应用
java·后端·python
Lonely丶墨轩1 小时前
从一个 404 到负数 ID:第三方接口开发中的几次排错
java
聪明的笨猪猪1 小时前
实际工程问题:AI生成MyBatis批量操作的SQL超限与性能雪崩
java·经验分享·面试·ai编程