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

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

相关推荐
吴声子夜歌几秒前
Nginx应用与运维——Nginx Web服务应用实战(HTTPS安全服务器的搭建)
运维·前端·nginx
liangshanbo12155 分钟前
Monorepo 工程化面试题:如何设计 Web + Node.js 中间层 + Shared + Scripts 的 Monorepo?
前端·node.js
IT_陈寒8 分钟前
Redis集群切换主节点时,服务竟然全员掉线
前端·人工智能·后端
星间都市山脉8 分钟前
RecoveryUI 圆角屏安全边距配置及代码调用链
android·java·linux·windows·ubuntu
sunshine22 girl11 分钟前
Java学习五 面向对象高级5 内部类4-匿名内部类(重点)
java·学习
wangbing112513 分钟前
开发指南147-WebSocket-前端
前端·websocket·网络协议
吴声子夜歌15 分钟前
Nginx应用与运维——Nginx Web服务应用实战(伪流媒体服务器的搭建)
运维·前端·nginx
java_nnnn15 分钟前
Spring Boot 快速上手:从 Maven 到第一个 Controller
java·spring·java-ee·maven
夕除20 分钟前
redis--集群
java·redis
蜗牛互联网20 分钟前
OLMo-core 3的token gerrymandering提醒:MoE路由要按时间窗验收
java·人工智能·wpf