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

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

相关推荐
Old Uncle Tom12 小时前
Harness Engineering 综述
java·开发语言·数据库
星原望野12 小时前
JAVA:策略模式的实战使用
java·开发语言·策略模式
LJianK112 小时前
java多态
java·开发语言·python
天蓝色的鱼鱼12 小时前
画1万个图形就卡成PPT?试试这款国产高性能2D引擎
前端·javascript
云水一下12 小时前
JavaScript 从零基础到精通系列:异步编程与网络请求
前端·javascript
z落落13 小时前
C# 构造函数(无参/有参/重载/this)+析构函数(终结器)|GC 垃圾回收
java·开发语言·c#
武子康13 小时前
Java-12 深入浅出 MyBatis 二级缓存详解:跨 SqlSession 共享与失效机制
java·后端
考虑考虑13 小时前
JDK9中的Set.of()使用注意
java·后端·java ee
卡卡军13 小时前
🌈 react-sketch-ruler v3 升级之旅:当 React 遇上跨框架标尺引擎
前端·react.js
plainGeekDev13 小时前
findViewById → ViewBinding
java·kotlin·gradle