CSS 3D汉堡菜单按钮

CSS + SVG 3D Sandwich menu button

css, svg, button

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 968
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.explore-menu {
  border: none;
  background: none;
  outline: none;
  color: #F9E7C5;
  font-size: 16px;
  line-height: 27px;
  font-weight: 800;
  font-family: 'Poppins', Arial;
  display: block;
  position: relative;
  cursor: pointer;
  width: 160px;
  text-align: center;
  border-radius: 26px;
  padding: 0;
  margin: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: -webkit-transform var(--transform-duration, 0.4s);
  transition: -webkit-transform var(--transform-duration, 0.4s);
  transition: transform var(--transform-duration, 0.4s);
  transition: transform var(--transform-duration, 0.4s), -webkit-transform var(--transform-duration, 0.4s);
  will-change: transform;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: perspective(480px) rotateX(calc(var(--rotate, 0deg) + var(--rx, 0deg))) rotateY(calc(0deg + var(--ry, 0deg))) translateZ(0);
          transform: perspective(480px) rotateX(calc(var(--rotate, 0deg) + var(--rx, 0deg))) rotateY(calc(0deg + var(--ry, 0deg))) translateZ(0);
}
.explore-menu:hover {
  --rotate: 18deg;
  --easing: cubic-bezier(.8, .5, .2, 1.4);
  --transform-duration: .15s;
  --duration: .5s;
  --top-y: -3px;
  --top-z: 36px;
  --pickle-x: 0;
  --pickle-z: 5px;
  --ketchup-y: -2px;
  --ketchup-s: 1;
  --ketchup-z: 28px;
  --salad-s: 1;
  --salad-z: 24px;
  --cheese-y: 2px;
  --cheese-s: 1;
  --cheese-z: 16px;
  --beef-y: 2px;
  --beef-s: 1;
  --beef-z: 4px;
  --bottom-y: 2px;
  --bottom-s: 1;
  --pickle-y: 0;
}
.explore-menu:hover:after {
  box-shadow: 36px 4px 0px rgba(0, 0, 0, 0.06), 16px 12px 0px rgba(0, 0, 0, 0.06), 20px 8px 0px rgba(0, 0, 0, 0.06);
}
.explore-menu:active {
  --duration: .25s;
  --rotate: 16deg;
  --pickle-x: 2px;
  --top-y: -1px;
  --top-z: 24px;
  --ketchup-y: 0px;
  --ketchup-s: .975;
  --ketchup-z: 20px;
  --salad-s: .975;
  --salad-z: 16px;
  --cheese-y: 1px;
  --cheese-s: .975;
  --cheese-z: 12px;
  --beef-y: 1px;
  --beef-s: .965;
  --beef-z: 2px;
  --bottom-y: 1px;
  --bottom-s: .975;
}
.explore-menu:active:after {
  box-shadow: 24px 3px 0px rgba(0, 0, 0, 0.08), 10px 8px 0px rgba(0, 0, 0, 0.08), 16px 4px 0px rgba(0, 0, 0, 0.08);
}
.explore-menu .top {
  position: relative;
  z-index: 7;
  padding: 12px 0;
  background: radial-gradient(55% 165% at 50% 50%, #F0A151 0%, #D18334 100%);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2), inset 0px -2.5px 0px rgba(0, 0, 0, 0.15);
  border-radius: 26px;
  text-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.15);
  -webkit-transform: translateY(var(--top-y, 0)) translateZ(var(--top-z, 1px));
          transform: translateY(var(--top-y, 0)) translateZ(var(--top-z, 1px));
  -webkit-transition: -webkit-transform var(--duration, 0.3s) var(--easing, ease);
  transition: -webkit-transform var(--duration, 0.3s) var(--easing, ease);
  transition: transform var(--duration, 0.3s) var(--easing, ease);
  transition: transform var(--duration, 0.3s) var(--easing, ease), -webkit-transform var(--duration, 0.3s) var(--easing, ease);
}
.explore-menu:before, .explore-menu:after {
  content: '';
  display: block;
  position: absolute;
}
.explore-menu:before {
  left: -2px;
  top: 16px;
  z-index: 3;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #A7BE5B;
  box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.25);
  -webkit-transform: translateX(var(--pickle-x, 8px)) translateZ(var(--pickle-z, 0));
          transform: translateX(var(--pickle-x, 8px)) translateZ(var(--pickle-z, 0));
  -webkit-transition: -webkit-transform var(--duration, 0.3s) var(--easing, ease);
  transition: -webkit-transform var(--duration, 0.3s) var(--easing, ease);
  transition: transform var(--duration, 0.3s) var(--easing, ease);
  transition: transform var(--duration, 0.3s) var(--easing, ease), -webkit-transform var(--duration, 0.3s) var(--easing, ease);
}
.explore-menu:after {
  position: absolute;
  left: -2px;
  top: 0;
  width: 164px;
  height: 53px;
  background: #B1612E;
  border-radius: 26px;
  -webkit-transform: translateY(var(--bottom-y, 0)) scale(var(--bottom-s, 0.8)) translateZ(0);
          transform: translateY(var(--bottom-y, 0)) scale(var(--bottom-s, 0.8)) translateZ(0);
  -webkit-transition: box-shadow var(--duration, 0.3s) var(--easing, ease), -webkit-transform var(--duration, 0.3s) var(--easing, ease);
  transition: box-shadow var(--duration, 0.3s) var(--easing, ease), -webkit-transform var(--duration, 0.3s) var(--easing, ease);
  transition: transform var(--duration, 0.3s) var(--easing, ease), box-shadow var(--duration, 0.3s) var(--easing, ease);
  transition: transform var(--duration, 0.3s) var(--easing, ease), box-shadow var(--duration, 0.3s) var(--easing, ease), -webkit-transform var(--duration, 0.3s) var(--easing, ease);
}
.explore-menu .ketchup,
.explore-menu .salad,
.explore-menu .cheese {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 160px;
  -webkit-transition: -webkit-transform var(--duration, 0.3s) var(--easing, ease);
  transition: -webkit-transform var(--duration, 0.3s) var(--easing, ease);
  transition: transform var(--duration, 0.3s) var(--easing, ease);
  transition: transform var(--duration, 0.3s) var(--easing, ease), -webkit-transform var(--duration, 0.3s) var(--easing, ease);
}
.explore-menu .ketchup {
  z-index: 6;
  height: 54px;
  fill: #D14253;
  -webkit-transform: translateY(var(--ketchup-y, 0)) scale(var(--ketchup-s, 0.9)) translateZ(var(--ketchup-z, 0));
          transform: translateY(var(--ketchup-y, 0)) scale(var(--ketchup-s, 0.9)) translateZ(var(--ketchup-z, 0));
}
.explore-menu .salad {
  z-index: 5;
  height: 52px;
  fill: #5B9A70;
  -webkit-transform: scale(var(--salad-s, 0.8)) translateZ(var(--salad-z, 0));
          transform: scale(var(--salad-s, 0.8)) translateZ(var(--salad-z, 0));
}
.explore-menu .cheese {
  z-index: 4;
  height: 53px;
  fill: #F89931;
  -webkit-transform: translateY(var(--cheese-y, 0)) scale(var(--cheese-s, 0.8)) translateZ(var(--cheese-z, 0));
          transform: translateY(var(--cheese-y, 0)) scale(var(--cheese-s, 0.8)) translateZ(var(--cheese-z, 0));
}
.explore-menu .beef {
  z-index: 2;
  position: absolute;
  left: -4px;
  top: 0;
  width: 168px;
  height: 51px;
  border-radius: 26px;
  background: #6D392D;
  box-shadow: inset 0px -2.5px 0px rgba(0, 0, 0, 0.25);
  -webkit-transform: translateY(var(--beef-y, 0)) scale(var(--beef-s, 0.75)) translateZ(var(--beef-z, 0));
          transform: translateY(var(--beef-y, 0)) scale(var(--beef-s, 0.75)) translateZ(var(--beef-z, 0));
  -webkit-transition: -webkit-transform var(--duration, 0.3s) var(--easing, ease);
  transition: -webkit-transform var(--duration, 0.3s) var(--easing, ease);
  transition: transform var(--duration, 0.3s) var(--easing, ease);
  transition: transform var(--duration, 0.3s) var(--easing, ease), -webkit-transform var(--duration, 0.3s) var(--easing, ease);
}
.explore-menu .beef:before, .explore-menu .beef:after {
  content: '';
  display: block;
  position: absolute;
}
.explore-menu .beef:before {
  background: #000;
  opacity: .25;
  width: 10px;
  height: 36px;
  border-radius: 5px;
  position: absolute;
  left: 9px;
  bottom: 8px;
  box-shadow: 16px 3px 0 #000,  32px 3px 0 #000, 48px 3px 0 #000, 63px 3px 0 #000, 78px 3px 0 #000, 93px 3px 0 #000, 108px 3px 0 #000, 124px 3px 0 #000, 140px 0 0 #000;
}
.explore-menu .beef:after {
  left: 97px;
  top: 21px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #A7BE5B;
  box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.25);
  -webkit-transform: translateY(var(--pickle-y, -6px)) translateZ(0);
          transform: translateY(var(--pickle-y, -6px)) translateZ(0);
  -webkit-transition: -webkit-transform var(--duration, 0.3s) var(--easing, ease);
  transition: -webkit-transform var(--duration, 0.3s) var(--easing, ease);
  transition: transform var(--duration, 0.3s) var(--easing, ease);
  transition: transform var(--duration, 0.3s) var(--easing, ease), -webkit-transform var(--duration, 0.3s) var(--easing, ease);
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  display: -webkit-box;
  display: flex;
  font-family: 'Poppins', Arial;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  background: #1F1F24;
}

HTML

<button class="explore-menu">
    <div class="beef"></div>
    <svg class="cheese" viewBox="0 0 160 53">
        <path d="M0.0742121 22.3328C1.05135 9.72939 11.5807 0 24.2433 0H144.841C151.675 0 157.394 5.17681 158.061 11.9668L159.974 31.4473C160.594 37.7607 150.009 44.9809 143.654 44.9541C124.599 44.8738 103.951 52.2575 84.8988 52.946C69.006 53.5202 56.2241 49.3376 40.3255 48.95C36.4794 48.8563 31.9925 48.9847 27.4027 49.2331C12.0678 50.0627 -1.11087 37.6185 0.0742121 22.3328Z"
        />
    </svg>
    <svg class="salad" viewBox="0 0 160 52">
        <path d="M0 23.2943C0 10.4292 10.3289 0 23.0703 0H134C148.359 0 160 11.9259 160 26.4247C160 40.3873 149.167 51.524 135.347 51.0361C117.842 50.4181 97.0486 49.4757 91.5 49.4757C70.1294 49.4757 70.5419 52 51.5 52C42.911 52 35.0402 51.5166 27.8556 51.0969C13.391 50.252 0 37.9238 0 23.2943Z"
        />
    </svg>
    <svg class="ketchup" viewBox="0 0 160 54">
        <path d="M0 25.2026C0 11.2836 11.2868 0 25.2097 0H134.912C148.768 0 160 11.229 160 25.0808C160 39.2502 148.267 50.5865 134.093 50.5825C127.22 50.5806 120.037 50.6804 114 50.9856C100.688 51.6586 93.3279 53.7853 80 53.9848C63.9475 54.225 55.0442 51.5562 39 50.9856C34.9927 50.8431 30.3922 50.7756 25.7886 50.7535C11.6411 50.6857 0 39.3462 0 25.2026Z"
        />
    </svg>
    <div class="top">Explore Menu</div>
</button>

CSS + SVG 3D Sandwich menu button

css, svg, button

编辑器支持Emmet

快捷键

CSS + SVG 3D Sandwich menu button

css, svg, button

纯CSS3实现的20个汉堡菜单按钮动效

HTML5 CSS3带波浪过渡动画的全屏汉堡菜单栏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：