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 分钟前
ThreadLocal 复习一
java·开发语言
程序帝国4 分钟前
SpringBoot整合RediSearch(完整,详细,连接池版本)
java·spring boot·redis·后端·redisearch
安卓程序员_谢伟光5 分钟前
如何监听System.exit(0)的调用栈
java·服务器·前端
Pluto_CSND15 分钟前
JSONPath解析JSON数据结构
java·数据结构·json
xiaoliuliu1234521 分钟前
Tomcat Connectors 1.2.32 源码编译安装教程(含 mod_jk 配置步骤)
java·tomcat
CYTElena25 分钟前
JAVA关于集合的笔记
java·开发语言·笔记
爱上妖精的尾巴30 分钟前
7-2 WPS JS宏 Object对象属性的查、改、增、删
前端·javascript·vue.js
源码获取_wx:Fegn089533 分钟前
基于springboot + vueOA工程项目管理系统
java·vue.js·spring boot·后端·spring
短剑重铸之日34 分钟前
《Java并发编程研读》第三章:锁机制
java·java并发编程·java锁机制
小哀239 分钟前
2025年总结: 我还在往前走
前端·后端·全栈