AI 助理
备案控制台
开发者社区 人工智能 文章 正文

创意按钮，触手可及：CSS不规则形状效果揭秘！

2024-08-22 45
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 创意按钮，触手可及：CSS不规则形状效果揭秘！

先上效果


🌟 在追求个性化和差异化的网页设计领域，不规则按钮效果是一种能够立即抓住用户眼球的视觉元素。这种效果通过打破传统的矩形按钮界限，采用独特的形状和样式，为网页添加了一种新颖的互动体验。



完整代码


以下是完整代码：

HTML:

<div id='content'>
    
    <div class="g-multiple">
        <div class='btn parallelogram'>Parallelogram</div>
        <div class='btn trapezoid'>Trapezoid</div>
    </div>
    <div class="g-multiple">
        <div class="btn notching">notching</div>
        <div class="btn clip-notching">notching</div>
        <div class="btn diamond">Diamond</div>
    </div>
    <div class="g-multiple">
        <div class="btn demo6">DEMO666</div>
        <div class="btn demo7">DEMO7</div>
        <div class="btn demo08">arrowflip</div>
    </div>
    <div class="g-multiple">
        <div class="btn linergradient">linergradient</div>
        <div class="btn demo12">demo12</div>
    </div>
    <div class="g-multiple">
        <div class="btn demo10">demo10</div>
        <div class="btn demo11">demo11</div>
    </div>
   
</div>

CSS代码:


:root {
    --color-rect: #f6ed8d;
    --color-circle: #1abc9c;
    --color-notching: #d35400;
    --color-notching2: #fab1a0;
    --color-parallelogram: #f4e803;
}
html,
body {
    width: 80%;
    min-height: 100%;
    font-size: 20px;
    text-align: center;
}
#content {
    width: 360px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin: auto;
}
.g-multiple {
    width: 400px;
    flex-shrink: 0;
    display: flex;
    flex-wrap: nowrap;
    margin: 0 auto;
}
.btn {
    margin: 20px;
    flex-shrink: 0;
    width: 160px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    position: relative;
    cursor: pointer;
    user-select: none;
   
    &:hover {
        top: -1px;
    }
    &:active {
        top: 1px;
    }
  
    
    &.parallelogram {
        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: -20px;
            bottom: 0;
            right: -20px;
            z-index: -1;
            background: var(--color-parallelogram);
            transform: skewX(15deg);
        }
    }
    
    &.trapezoid {
        &::after {
          content:"";
          position: absolute;
          top: 0; right: 0; bottom: 0; left: 0;
          transform: perspective(40px) scaleY(1.3) rotateX(10deg);
          transform-origin: bottom;
          background: #fdcb6e;
          z-index:-1;
        }
    }
    &.notching {
    background:
        linear-gradient(135deg, transparent 10px, #ff7739 0)top left,
        linear-gradient(-135deg, transparent 10px, #ff7739 0) top right,
        linear-gradient(-45deg, transparent 10px, #ff7739 0) bottom right,
        linear-gradient(45deg, transparent 10px, #ff7739 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}
&.diamond {
    background:
        linear-gradient(135deg, transparent 22px, #a8f0f3 0)top left,
        linear-gradient(-135deg, transparent 22px, #a8f0f3 0) top right,
        linear-gradient(-45deg, transparent 22px, #a8f0f3 0) bottom right,
        linear-gradient(45deg, transparent 22px, #a8f0f3 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}
    &.clip-notching {
        background: linear-gradient(
            45deg,
            #f2f7c2,
        #f2f7c2
        );
        clip-path: polygon(
            15px 0,
            calc(100% - 15px) 0,
            100% 15px,
            100% calc(100% - 15px),
            calc(100% - 15px) 100%,
            15px 100%,
            0 calc(100% - 15px),
            0 15px
        );
    }
    &.demo6 {
        background: linear-gradient(
                    -135deg,
                    transparent 22px,
                    #ffd0b8 22px,
                    #9613fb 100%
                )
                top right,
            linear-gradient(
                    -45deg,
                    transparent 22px,
                    #04e6fb 22px,
                    #9006fb 100%
                )
                bottom right;
        background-size: 100% 50%;
        background-repeat: no-repeat;
    }
    &.demo7 {
        background:
            linear-gradient( -135deg, transparent 22%, #ffb7bd 22%, #9006fb 78%, transparent 0) top right,
            linear-gradient(-45deg, transparent 22%, #ffb7bd 22%, #9006fb 78%, transparent 0) bottom right;
        background-size: 100% 50%;
        background-repeat: no-repeat;
    }
    &.demo08 {
        background: linear-gradient(45deg, #cffbff, #65ff9a);
        clip-path: polygon(
            0 0,
            30px 50%,
            0 100%,
            calc(100% - 30px) 100%,
            100% 50%,
            calc(100% - 30px) 0
        );
    }
    &.inset-circle {
        background-size: 70% 70%;
        background-image: radial-gradient(
                circle at 100% 100%,
                transparent 0,
                transparent 12px,
                #a3c9ff 13px
            ),
            radial-gradient(
                circle at 0 0,
                transparent 0,
                transparent 12px,
                #2179f5 13px
            ),
            radial-gradient(
                circle at 100% 0,
                transparent 0,
                transparent 12px,
                #2179f5 13px
            ),
            radial-gradient(
                circle at 0 100%,
                transparent 0,
                transparent 12px,
                #2179f5 13px
            );
        background-repeat: no-repeat;
        background-position: right bottom, left top, right top, left bottom;
    }
    &.linergradient {
        background: linear-gradient(45deg, #2179f5, #e91e63);
        mask: radial-gradient(
                circle at 100% 100%,
                transparent 0,
                transparent 12px,
                #2179f5 13px
            ),
            radial-gradient(
                circle at 0 0,
                transparent 0,
                transparent 12px,
                #2179f5 13px
            ),
            radial-gradient(
                circle at 100% 0,
                transparent 0,
                transparent 12px,
                #2179f5 13px
            ),
            radial-gradient(
                circle at 0 100%,
                transparent 0,
                transparent 12px,
                #2179f5 13px
            );
        mask-repeat: no-repeat;
        mask-position: right bottom, left top, right top, left bottom;
        mask-size: 70% 70%;
    }
    &.demo10 {
        position: relative;
        width: 120px;
        text-indent: 10px;
        animation: buttonAnimation 1s linear infinite;
        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgb(7, 220, 239);
            transform: skewX(15deg);
            border-radius: 10px;
            z-index: -1;
        }
        &::before {
            content: "";
            position: absolute;
            top: 0;
            right: -13px;
            width: 100px;
            height: 64px;
            border-radius: 10px;
            background: rgb(7, 220, 239);
            z-index: -1;
        }
    }
    @keyframes buttonAnimation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
    &.demo11 {
        width: 120px;
        position: relative;
        
        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, rgb(0, 214, 247), #007792);
            transform: skewX(15deg);
            border-radius: 10px;
            z-index: -1;
        }
        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: -13px;
            width: 100px;
            height: 64px;
            border-radius: 10px;
            background: rgb(0, 214, 247);
            z-index: -1;
        }
    }
    
    &.demo12 {
        position: relative;
        background: #25f7a64f;
        border-radius: 10px 10px 0 0;
        &::before {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            left: -20px;
            bottom: 0;
            background: #000;
            background:radial-gradient(circle at 0 0, transparent 20px, #25f7a64f 21px);
        }
        &::after {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            right: -20px;
            bottom: 0;
            background: #000;
            background:radial-gradient(circle at 100% 0, transparent 20px, #25f7a64f 21px);
        }
    }
}

🌟 CSS不规则按钮是有以下几个关键点：


  1. 变量（Variables）：您使用了CSS变量（也称为自定义属性）来定义颜色和尺寸，这样可以在整个项目中复用这些值，提高代码的可维护性。
  2. Flexbox布局（Flexbox Layout）：您使用了Flexbox布局来创建弹性容器和弹性项目，这使得布局更加灵活，可以轻松地实现各种布局和响应式设计。
  3. 渐变（Gradients）：您使用了线性渐变（linear-gradient）和径向渐变（radial-gradient）来创建背景颜色渐变，使按钮具有丰富的视觉效果。
  4. 遮罩（Masks）：您使用了mask属性来创建遮罩效果，通过结合clip-path属性，可以创建复杂的形状，如多边形、圆形和内嵌形状。
  5. 过渡（Transitions）：您使用了transition属性来添加平滑的动画效果，如按钮在悬停和点击时的位置变化。
  6. 动画（Animations）：您使用了@keyframes规则来定义动画，并通过animation属性应用到元素上，实现按钮的动态效果。
  7. 伪元素（Pseudo-elements）：您使用了::before和::after伪元素来添加额外的内容或效果，如阴影、边框和背景图案
文章标签：
前端开发
容器
搜索推荐
关键词：
CSS规则
CSS形状
CSS规则形状
按钮CSS
游客fz577umxdejsg
目录
相关文章
。思索
|
3月前
|
前端开发
CSS——@layer规则
CSS——@layer规则
。思索
53 2
CSS——@layer规则
龙腾九州
|
2月前
|
前端开发
CSS样式规则
CSS样式规则。
龙腾九州
34 2
土木林森
|
3月前
|
前端开发 开发者
CSS样式覆盖规则详解，让你的网页更加出彩！
【8月更文挑战第23天】在Web前端开发中，理解CSS样式覆盖规则至关重要。当多个样式规则作用于同一元素时，哪些规则生效？本文通过实例解析这些规则。简单案例中，`.error`类选择器优先级高于`p`标签，文字显示红色。复杂案例涉及`.important`类与`!important`关键字，此时文字变为绿色。另外，内联样式拥有比外部样式更高的优先级。掌握这些原则有助于开发者高效管理样式。
土木林森
94 0
游客fz577umxdejsg
|
3月前
|
前端开发 UED
设计新潮流：CSS动画毛玻璃按钮，展开效果引人入胜！
设计新潮流：CSS动画毛玻璃按钮，展开效果引人入胜！
游客fz577umxdejsg
37 0
孙飞i
|
3月前
|
前端开发
css来实现一个好玩的按钮
这段代码实现了一个具有独特悬停效果的按钮。通过定义按钮及其`:after`伪元素，并设置初始状态下的透明度和尺寸，当鼠标悬停在按钮上时，背景色平滑过渡至另一种颜色，产生视觉上的动态扩展效果。为避免覆盖文字，特地调整了伪元素的层级，确保交互过程中文字始终可见。整体效果流畅自然，增强了用户界面的互动性与美观度。
孙飞i
56 0
朝阳39
|
4月前
|
前端开发
css特效——纯css绘制图标：带框的加号（添加按钮）、三横（三道杠）、带圈点（双层圆点）
css特效——纯css绘制图标：带框的加号（添加按钮）、三横（三道杠）、带圈点（双层圆点）
朝阳39
120 5
朝阳39
|
4月前
|
前端开发
css动画 —— 自定义不规则的动画路径 offset-path （含不规则的动画路径参数获取方法）
css动画 —— 自定义不规则的动画路径 offset-path （含不规则的动画路径参数获取方法）
朝阳39
103 1
朝阳39
|
4月前
|
前端开发
css特效——Photoshop选区（动感的虚线选框，支持不规则的选框）
css特效——Photoshop选区（动感的虚线选框，支持不规则的选框）
朝阳39
30 1
朝阳39
|
4月前
|
前端开发 SEO
css实用技巧——最佳可访问性隐藏（网站左上角的logo，用label替代表单提交按钮）
css实用技巧——最佳可访问性隐藏（网站左上角的logo，用label替代表单提交按钮）
朝阳39
40 0
好奇的菜鸟
|
5月前
|
前端开发 开发者
CSS 选择器与相关规则详解
CSS 选择器与相关规则详解
好奇的菜鸟
39 0

热门文章

最新文章

  • 1
    Css基本样式————字体
  • 2
    使用 CSS3 实现 3D 图片滑块效果【附源码下载】
  • 3
    CSS3实现多样的边框效果
  • 4
    CSS3-实现单选框radio的小动画
  • 5
    纯CSS3实现宽屏二级下拉菜单
  • 6
    CSS伪元素实现的3D按钮
  • 7
    CSS3实现时间轴效果
  • 8
    05.javascript访问CSS
  • 9
    【HTML+CSS+JS】前端三剑客实现3D旋转照片墙
  • 10
    CSS3中的选择器
  • 1
    【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
    54
  • 2
    HTML5/CSS3粒子效果进度条代码
    60
  • 3
    同样都是将物理设备虚拟化，思科的VSS和华为的CSS到底有啥区别？
    123
  • 4
    CSS 超出内容... 或者多行省略及两端对齐及超出多行居中显示
    44
  • 5
    CSS外边距重叠：原理、结果
    49
  • 6
    css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
    57
  • 7
    CSS常见用法 以及JS基础语法
    60
  • 8
    css设置内嵌样式阴影
    62
  • 9
    css样式实现一个滑动按钮
    56
  • 10
    wxss和css的区别
    316

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 相册服务中的故事生成算法介绍

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 营销设计场景下的图像和文字生成
  • 3D动画的菜谱式灯光与云渲染

    • 相关实验场景

    更多
  • 【图生图】一键部署3D卡通风格模型
  • 通义万相文本绘图与人像美化
  • 图表样式智能美化工具
  • 函数计算部署AI艺术字应用，生成新春文字头像
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    阿里云OSS设置跨域访问