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

效果图

 

相关文章
|
3月前
|
前端开发 UED
设计新潮流:CSS动画毛玻璃按钮,展开效果引人入胜!
设计新潮流:CSS动画毛玻璃按钮,展开效果引人入胜!
|
3月前
|
前端开发 搜索推荐 容器
创意按钮,触手可及:CSS不规则形状效果揭秘!
创意按钮,触手可及:CSS不规则形状效果揭秘!
|
3月前
|
前端开发
css来实现一个好玩的按钮
这段代码实现了一个具有独特悬停效果的按钮。通过定义按钮及其`:after`伪元素,并设置初始状态下的透明度和尺寸,当鼠标悬停在按钮上时,背景色平滑过渡至另一种颜色,产生视觉上的动态扩展效果。为避免覆盖文字,特地调整了伪元素的层级,确保交互过程中文字始终可见。整体效果流畅自然,增强了用户界面的互动性与美观度。
56 0
|
4月前
|
前端开发
css特效——纯css绘制图标:带框的加号(添加按钮)、三横(三道杠)、带圈点(双层圆点)
css特效——纯css绘制图标:带框的加号(添加按钮)、三横(三道杠)、带圈点(双层圆点)
117 5
|
5月前
|
前端开发
CSS动画(毛玻璃按钮)
CSS动画(毛玻璃按钮)
|
5月前
|
前端开发
CSS动画效果(鼠标滑过按钮动画)
CSS动画效果(鼠标滑过按钮动画)
|
4月前
|
前端开发 SEO
css实用技巧——最佳可访问性隐藏(网站左上角的logo,用label替代表单提交按钮)
css实用技巧——最佳可访问性隐藏(网站左上角的logo,用label替代表单提交按钮)
39 0
|
5月前
|
前端开发
css html 渐变按钮
css html 渐变按钮
28 0
|
6月前
|
前端开发
css样式实现一个滑动按钮
css样式实现一个滑动按钮
56 0

热门文章

最新文章