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

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

相关推荐
发现你走远了13 小时前
2025 idea 指定配置环境运行springboot 设置active和env启动端口,多端口启动 (保姆级图文)
java·spring boot·intellij-idea
yqcoder13 小时前
在 scss 中,&>div 作用
前端·css·scss
小马哥编程13 小时前
这个variables.scss文件中$menuText:#bfcbd9;:export {menuText: $menuText; }的语法符合要求吗
前端·css·scss
宋辰月13 小时前
zustand
前端·javascript·html
z***I39413 小时前
JavaScript原型链
开发语言·前端·javascript
sanggou13 小时前
Java秒杀系统设计与实现
java
JinSo13 小时前
Ultracite:为 AI 时代打造的零配置代码规范工具
前端·javascript·github
ZEGO即构开发者13 小时前
WebRTC 实战:用即构 SDK 搭建 Web 端 1v1 视频通话(含完整流程与 Demo)
前端·音视频·webrtc
情怀姑娘13 小时前
面试题---------------场景+算法
java·算法·mybatis
爆浆麻花13 小时前
为什么有些人边框不用border属性
前端·css