# 预览效果
# HTML 结构
| <div class="container"> |
| <button class="btn">点赞</button> |
| <button class="btn">投币</button></button> |
| <button class="btn">收藏</button> |
| <button class="btn">分享</button></button> |
| </div> |
# CSS 样式
| body { |
| --bgc: #353b48; |
| background-color: var(--bgc); |
| } |
| .container { |
| display: flex; |
| flex-direction: row; |
| flex-wrap: wrap; |
| justify-content: space-around; |
| width: 500px; |
| } |
| .container .btn { |
| width: 200px; |
| height: 60px; |
| border: 3px solid; |
| background: none; |
| color: var(--c); |
| cursor: pointer; |
| font-size: 16px; |
| font-width: 700; |
| margin: 20px; |
| position: relative; |
| } |
| .container .btn::before, |
| .container .btn::after { |
| content: ''; |
| position: absolute; |
| width: 14px; |
| height: 4px; |
| background-color: var(--bgc); |
| transform: skewX(30deg); |
| transition: .4s ease; |
| } |
| .container .btn::before { |
| top: -4px; |
| left: 10%; |
| } |
| .container .btn::after { |
| bottom: -4px; |
| right: 10%; |
| } |
| .container .btn:hover::before { |
| left: 80% |
| } |
| .container .btn:hover::after { |
| right: 80%; |
| |
| animation: after 2s; |
| } |
| .container .btn:nth-child(1) { |
| --c: #4ad3e2 |
| } |
| .container .btn:nth-child(2) { |
| --c: #93edd4 |
| } |
| .container .btn:nth-child(3) { |
| --c: #f9cb8f |
| } |
| .container .btn:nth-child(4) { |
| --c: #ffb1a3 |
| } |
# Stylus 样式
stylus index.styl -o index.css -w
| body |
| --bgc #353b48 |
| background-color var(--bgc) |
| |
| .container |
| display flex |
| flex-direction row |
| flex-wrap wrap |
| justify-content space-around |
| width 500px |
| .btn |
| width 200px |
| height 60px |
| border 3px solid |
| background none |
| color var(--c) |
| cursor pointer |
| font-size 16px |
| font-width 700 |
| margin 20px |
| position relative |
| |
| .btn::before, |
| .btn::after |
| content '' |
| position absolute |
| width 14px |
| height 4px |
| background-color var(--bgc) |
| transform skewX(30deg) |
| transition .4s ease |
| |
| .btn::before |
| top -4px |
| left 10% |
| |
| .btn::after |
| bottom -4px |
| right 10% |
| |
| .btn:hover::before |
| left 80% |
| |
| .btn:hover::after |
| right 80% |
| |
| animation after 2s |
| |
| .btn:nth-child(1) |
| --c #4ad3e2 |
| |
| .btn:nth-child(2) |
| --c #93edd4 |
| |
| .btn:nth-child(3) |
| --c #f9cb8f |
| |
| .btn:nth-child(4) |
| --c #ffb1a3 |
