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

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

相关推荐
千寻girling2 分钟前
马上元旦节了,手写一个《前端脚手架》庆祝一下 !
前端
qq_124987075314 分钟前
基于微信小程序的电子元器件商城(源码+论文+部署+安装)
java·spring boot·spring·微信小程序·小程序·毕业设计
嚣张丶小麦兜19 分钟前
认识vite
前端·javascript·vue.js
吃喝不愁霸王餐APP开发者20 分钟前
基于Spring Cloud Gateway实现对外卖API请求的统一鉴权与流量染色
java·开发语言
a努力。23 分钟前
美团Java面试被问:Redis集群模式的工作原理
java·redis·后端·面试
一雨方知深秋32 分钟前
面向对象编程
java·封装·this·构造器·static关键字·成员变量·javabean实体类
资生算法程序员_畅想家_剑魔35 分钟前
Java常见技术分享-11-责任链模式
java·spring boot·责任链模式
玲小珑1 小时前
请求 ID 跟踪模式:解决异步请求竞态条件
前端
计算机程序设计小李同学1 小时前
动漫之家系统设计与实现
java·spring boot·后端·web安全
lcc1871 小时前
CSS 定位
css