按钮选中点击效果

下载代码

html

css

分享到微信朋友圈

html

css

* {
  --primary-1: 230, 15%, 22%; /* Neutral */
  --primary-2: 230, 15%, 20%; /* Dark */
  --primary-3: 230, 15%, 18%; /* Darker */
  --primary-4: 230, 15%, 45%; /* Lightest */
  --secondary: 166, 69%, 81%; /* Splash of Color */
  --transition: cubic-bezier(0.77, 0, 0.175, 1); 
}

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

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(296.91deg, #3f3547 3.73%, #7D81A4 97.68%); 
}

.multi-button {
  --shadow: 286, 24%, 14%;
  position: relative;
  padding: .2rem;
  background: hsl(var(--primary-1));
  border: 1px solid hsl(var(--primary-2));  
  box-shadow: 
    1px 1px 1px hsla(var(--shadow),.12),
    3px 3px 3px hsla(var(--shadow),.11), 
    5px 5px 5px hsla(var(--shadow),.1),
    7px 7px 7px hsla(var(--shadow),.09),
    11px 11px 11px hsla(var(--shadow),.08),
    13px 13px 13px hsla(var(--shadow),.07),
    17px 17px 17px hsla(var(--shadow),.06),
    19px 19px 19px hsla(var(--shadow),.05),
    23px 23px 23px hsla(var(--shadow),.04),
    29px 29px 29px hsla(var(--shadow),.03);
  border-radius: 4px;
  user-select: none;
}

label {
  display: inline-block;
  position: relative;
  padding: .8rem 1.4rem; 
  color: #5C617B;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Poppins', 'Helvetica', sans-serif;
  text-transform: uppercase;
  letter-spacing: 4px;
  border: none;
  border-radius: 2px;
  background: none;
  transition: all .4s var(--transition); 
  cursor: pointer;
}

span {
  margin-right: .1rem;
}

span svg {
  height: 16px;
  width: 16px;
}

label:before {
  content: '';
  position: absolute;
  height: 1px;
  width: 0;
  top: 20%;
  left: 50%;
  background: hsla(var(--secondary),.35);
  border-radius: 2px;  
  transition: all .25s var(--transition);
}

label:hover:before {
  width: 80%;
  left: 10%;
  border-top: 1px solid hsl(var(--secondary));
}

input:checked + label:before {
  height: 60%;
  bottom: 20%;
}

input:checked + label {  
  color: hsl(var(--secondary));
  transition-delay: .1s;
}

input[type="checkbox"] {
  display: none;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg