创意按钮，触手可及：CSS不规则形状效果揭秘！-阿里云开发者社区

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

2024-08-22 22

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 创意按钮，触手可及：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不规则按钮是有以下几个关键点：

变量（Variables）：您使用了CSS变量（也称为自定义属性）来定义颜色和尺寸，这样可以在整个项目中复用这些值，提高代码的可维护性。
Flexbox布局（Flexbox Layout）：您使用了Flexbox布局来创建弹性容器和弹性项目，这使得布局更加灵活，可以轻松地实现各种布局和响应式设计。
渐变（Gradients）：您使用了线性渐变（linear-gradient）和径向渐变（radial-gradient）来创建背景颜色渐变，使按钮具有丰富的视觉效果。
遮罩（Masks）：您使用了mask属性来创建遮罩效果，通过结合clip-path属性，可以创建复杂的形状，如多边形、圆形和内嵌形状。
过渡（Transitions）：您使用了transition属性来添加平滑的动画效果，如按钮在悬停和点击时的位置变化。
动画（Animations）：您使用了@keyframes规则来定义动画，并通过animation属性应用到元素上，实现按钮的动态效果。
伪元素（Pseudo-elements）：您使用了::before和::after伪元素来添加额外的内容或效果，如阴影、边框和背景图案

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景