CSS 斜体按钮

简介: 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;
    }

效果图

 

相关文章
|
19天前
|
前端开发
|
4月前
|
前端开发 JavaScript
分享几个精美的网页按钮样式,纯CSS实现,无JS(拿来即用)
分享几个精美的网页按钮样式,纯CSS实现,无JS(拿来即用)
36 0
|
5月前
|
前端开发
纯css实现的一些好看的按钮
纯css实现的一些好看的按钮
41 0
|
6月前
|
前端开发
HTML + CSS各种好看按钮组件
HTML + CSS各种好看按钮组件
|
6月前
|
前端开发
css实现平行四边形按钮
css实现平行四边形按钮
35 0
|
6月前
|
前端开发
Bootstrap纯CSS3箭头按钮样式
Bootstrap纯CSS3箭头按钮样式
|
6月前
|
前端开发 CDN
钉钉卡片点击按钮,跳转连接,css无法加载
钉钉卡片点击按钮,跳转连接,css无法加载
36 1
|
7月前
|
前端开发
CSS3 按钮
CSS3 按钮
29 0
|
前端开发
纯CSS3彩色边线3D立体按钮制作教程
原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣。本文不仅可以让大家看到演示效果,而且我们把制作教程也分享出来,首先来看看效果图: 我们也可以在这里看到这些按钮的DEMO演示。
948 0
|
前端开发
10个实用的 CSS3 按钮效果制作教程
  人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能。这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力。这里分享的10个优秀的 CSS3 按钮效果制作教程,你可以学习这些技术并使用它们为您的作品创造更多的乐趣。
941 0