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

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

相关推荐
远山无期14 小时前
解决Tailwind任意值滥用:规范化CSS开发体验
前端·css·eslint
love is sour14 小时前
深入浅出 jmap:Java 内存分析的“显微镜“
java·开发语言·测试工具·性能优化
用户542778485154014 小时前
Vue 3 中开发高阶组件(HOC)与 Renderless 组件
前端
想用offer打牌14 小时前
虚拟内存与寻址方式解析(面试版)
java·后端·面试·系统架构
代码or搬砖14 小时前
SQL核心语法总结:从基础操作到高级窗口函数
java·数据库·sql
月明长歌14 小时前
【码道初阶】【Leetcode94&144&145】二叉树的前中后序遍历(非递归版):显式调用栈的优雅实现
java·数据结构·windows·算法·leetcode·二叉树
HIT_Weston14 小时前
67、【Ubuntu】【Hugo】搭建私人博客(一)
前端·ubuntu·hugo
阿里巴啦15 小时前
用React+Three.js 做 3D Web版搭建三维交互场景:模型的可视化摆放与轻量交互
前端·react·three.js·模型可视化·web三维·web三维交互场景
杰克尼15 小时前
蓝桥云课-5. 花灯调整【算法赛】
java·开发语言·算法
wanghowie15 小时前
01.02 Java基础篇|核心数据结构速查
java·开发语言·数据结构