CSS 斜体按钮

Hello,大家好,今天给大家推荐一个css的小样式 斜体按钮!是不是听起来很酷呢,让我们一起看看吧!

首先是html:

<button>斜体按钮</button>

接下来是css样式:

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

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

相关推荐

  1. QT配合CSS隐藏按钮

    2024-01-17 08:42:02       54 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-17 08:42:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-17 08:42:02       100 阅读
  3. 在Django里面运行非项目文件

    2024-01-17 08:42:02       82 阅读
  4. Python语言-面向对象

    2024-01-17 08:42:02       91 阅读

热门阅读

  1. cmake构建动态库实例(cmakelist)

    2024-01-17 08:42:02       54 阅读
  2. SPA首屏加载速度慢怎么解决

    2024-01-17 08:42:02       46 阅读
  3. AtCoder Beginner Contest 333 A-D题解

    2024-01-17 08:42:02       53 阅读
  4. Jupyter Notebook之添加anaconda环境

    2024-01-17 08:42:02       60 阅读
  5. re模块中match函数的使用

    2024-01-17 08:42:02       53 阅读
  6. springMvc的Aop解析并修改参数

    2024-01-17 08:42:02       52 阅读
  7. Python 3 中如何使用 format 方法格式化字符串

    2024-01-17 08:42:02       54 阅读
  8. 高并发场景下底层账务优化方案

    2024-01-17 08:42:02       58 阅读
  9. **FutureTask应用&源码分析**(二)

    2024-01-17 08:42:02       56 阅读
  10. 机器学习:简要介绍及应用案例

    2024-01-17 08:42:02       58 阅读
  11. #Day13 C基础(指针数组、函数)

    2024-01-17 08:42:02       50 阅读
  12. 如何在原型中实现继承和多态

    2024-01-17 08:42:02       51 阅读
  13. 【Qt5】QString的成员函数arg

    2024-01-17 08:42:02       61 阅读
  14. vue 开发规范

    2024-01-17 08:42:02       52 阅读
  15. 【vue】-

    2024-01-17 08:42:02       52 阅读