毛玻璃
按钮 1 原理
主要涉及 CSS 的 stroke-dasharray 和 stroke-dashoffset 这两个属性，stroke-dasharray 控制画笔的虚实，stroke-dashoffset 是闭包循环。
按钮 2 原理
利用 伪元素 绝对定位，在按钮的外部定义了一个半透明且 rotate 过的白板，当 hover 时，白板从左到有右划过。
真相：
按钮 3 原理
巧妙利用 transition 过渡实现。
代码实现：
<section class="buttons">
<div class="container">
<a href="#" class="btn btn-1">
<svg>
<rect x="0" y="0" fill="none" width="100%" height="100%" />
</svg>
Hover
</a>
<a href="#" class="btn btn-2"><span>Hover</span></a>
<a href="#" class="btn btn-3">Hover</a>
</div>
</section>
body{background:linear-gradient(to right, #FEAC5E, #C779D0, #4BC0C8)}.container{margin-top:50px;align-items:center;display:flex;justify-content:center;text-align:center}.btn{color:#fff;cursor:pointer;font-size:16px;font-weight:400;line-height:45px;margin:0 0 2em;max-width:160px;position:relative;text-decoration:none;text-transform:uppercase;width:100%;margin-right:30px}.btn:hover{text-decoration:none}.btn-1 svg{height:45px;left:0;position:absolute;top:0;width:100%}.btn-1 rect{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:422, 0;-webkit-transition:all 0.35s linear;transition:all 0.35s linear}.btn-1:hover{background:rgba(225, 51, 45, 0);font-weight:900;letter-spacing:1px}.btn-1:hover rect{stroke-width:5;stroke-dasharray:15, 310;stroke-dashoffset:48;-webkit-transition:all 1.35s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1.35s cubic-bezier(0.19, 1, 0.22, 1)}.btn-2{border:1px solid;position:relative}.btn-2 span{z-index:20}.btn-2:after{background:#fff;content:"";height:155px;left:-75px;opacity:1;position:absolute;top:-50px;-webkit-transform:rotate(35deg);transform:rotate(35deg);-webkit-transition:all 550ms cubic-bezier(0.19, 1, 0.22, 1);transition:all 550ms cubic-bezier(0.19, 1, 0.22, 1);width:50px;z-index:30}.btn-2:hover:after{left:120%;-webkit-transition:all 550ms cubic-bezier(0.19, 1, 0.22, 1);transition:all 550ms cubic-bezier(0.19, 1, 0.22, 1)}.btn-3{border:0 solid;box-shadow:inset 0 0 20px rgba(255, 255, 255, 0);outline:1px solid;outline-color:rgba(255, 255, 255, 0.5);outline-offset:0px;text-shadow:none;-webkit-transition:all 1250ms cubic-bezier(0.19, 1, 0.22, 1);transition:all 1250ms cubic-bezier(0.19, 1, 0.22, 1)}.btn-3:hover{border:1px solid;box-shadow:inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);outline-color:rgba(255, 255, 255, 0);outline-offset:15px;text-shadow:1px 1px 2px #427388}
极简
染墨
<a class="btn" href="#">Position Aware<span></span></a>
<script>
let btn = document.querySelector('.btn')
btn.addEventListener('mouseenter', e => {
animate(e, btn)
})
btn.addEventListener('mouseout', e => {
animate(e, btn)
})
function animate(event, elm) {
let parentOffset = elm.getBoundingClientRect(),
relX = event.pageX - parentOffset.left
relY = event.pageY - parentOffset.top
let span = event.target.children[0]
span.style.top = relY + 'px'
span.style.left = relX + 'px'
}
</script>
a{text-decoration:none;line-height:80px}[class^="btn"]{position:relative;display:block;overflow:hidden;height:80px;width:100%;max-width:250px;margin:1rem auto;text-transform:uppercase;border:1px solid currentColor;text-align:center;transition:0.5s ease-in-out}.btn{color:#bb3669}span{position:absolute;display:block;width:0;height:0;border-radius:50%;background-color:#690b2f;transition:width 0.4s ease-in-out, height 0.4s ease-in-out;transform:translate(-50%, -50%);z-index:-1}.btn:hover{color:#ebc4d3}.btn:hover span{width:225%;height:562.5px}.btn:active{background-color:#af134e}
它的家族：
气泡
赛博朋克 2077
综合按钮
<nav class="menu">
<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open" />
<label class="menu-open-button" for="menu-open">
<span class="lines line-1"></span>
<span class="lines line-2"></span>
<span class="lines line-3"></span>
</label>
<a href="#" class="menu-item blue"> <i class="fa fa-anchor"></i> </a>
<a href="#" class="menu-item green"> <i class="fa fa-coffee"></i> </a>
<a href="#" class="menu-item red"> <i class="fa fa-heart"></i> </a>
<a href="#" class="menu-item purple"> <i class="fa fa-microphone"></i> </a>
<a href="#" class="menu-item orange"> <i class="fa fa-star"></i> </a>
<a href="#" class="menu-item lightblue"> <i class="fa fa-diamond"></i> </a>
</nav>
body{padding:0;margin:0;background:#596778;color:#EEEEEE;text-align:center;font-family:"Lato", sans-serif}@media screen and (max-width:700px){body{padding:170px 0 0 0;width:100%}}a{color:inherit}.menu-item,.menu-open-button{background:#EEEEEE;border-radius:100%;width:80px;height:80px;margin-left:-40px;position:absolute;color:#FFFFFF;text-align:center;line-height:80px;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transition:-webkit-transform ease-out 200ms;transition:-webkit-transform ease-out 200ms;transition:transform ease-out 200ms;transition:transform ease-out 200ms, -webkit-transform ease-out 200ms}.menu-open{display:none}.lines{width:25px;height:3px;background:#596778;display:block;position:absolute;top:50%;left:50%;margin-left:-12.5px;margin-top:-1.5px;-webkit-transition:-webkit-transform 200ms;transition:-webkit-transform 200ms;transition:transform 200ms;transition:transform 200ms, -webkit-transform 200ms}.line-1{-webkit-transform:translate3d(0, -8px, 0);transform:translate3d(0, -8px, 0)}.line-2{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.line-3{-webkit-transform:translate3d(0, 8px, 0);transform:translate3d(0, 8px, 0)}.menu-open:checked + .menu-open-button .line-1{-webkit-transform:translate3d(0, 0, 0) rotate(45deg);transform:translate3d(0, 0, 0) rotate(45deg)}.menu-open:checked + .menu-open-button .line-2{-webkit-transform:translate3d(0, 0, 0) scale(0.1, 1);transform:translate3d(0, 0, 0) scale(0.1, 1)}.menu-open:checked + .menu-open-button .line-3{-webkit-transform:translate3d(0, 0, 0) rotate(-45deg);transform:translate3d(0, 0, 0) rotate(-45deg)}.menu{margin:auto;position:absolute;top:0;bottom:0;left:0;right:0;width:80px;height:80px;text-align:center;box-sizing:border-box;font-size:26px}.menu-item:hover{background:#EEEEEE;color:#3290B1}.menu-item:nth-child(3){-webkit-transition-duration:180ms;transition-duration:180ms}.menu-item:nth-child(4){-webkit-transition-duration:180ms;transition-duration:180ms}.menu-item:nth-child(5){-webkit-transition-duration:180ms;transition-duration:180ms}.menu-item:nth-child(6){-webkit-transition-duration:180ms;transition-duration:180ms}.menu-item:nth-child(7){-webkit-transition-duration:180ms;transition-duration:180ms}.menu-item:nth-child(8){-webkit-transition-duration:180ms;transition-duration:180ms}.menu-item:nth-child(9){-webkit-transition-duration:180ms;transition-duration:180ms}.menu-open-button{z-index:2;-webkit-transition-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1.275);transition-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1.275);-webkit-transition-duration:400ms;transition-duration:400ms;-webkit-transform:scale(1.1, 1.1) translate3d(0, 0, 0);transform:scale(1.1, 1.1) translate3d(0, 0, 0);cursor:pointer;box-shadow:3px 3px 0 0 rgba(0, 0, 0, 0.14)}.menu-open-button:hover{-webkit-transform:scale(1.2, 1.2) translate3d(0, 0, 0);transform:scale(1.2, 1.2) translate3d(0, 0, 0)}.menu-open:checked + .menu-open-button{-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transform:scale(0.8, 0.8) translate3d(0, 0, 0);transform:scale(0.8, 0.8) translate3d(0, 0, 0)}.menu-open:checked ~ .menu-item{-webkit-transition-timing-function:cubic-bezier(0.935, 0, 0.34, 1.33);transition-timing-function:cubic-bezier(0.935, 0, 0.34, 1.33)}.menu-open:checked ~ .menu-item:nth-child(3){transition-duration:180ms;-webkit-transition-duration:180ms;-webkit-transform:translate3d(0.08361px, -104.99997px, 0);transform:translate3d(0.08361px, -104.99997px, 0)}.menu-open:checked ~ .menu-item:nth-child(4){transition-duration:280ms;-webkit-transition-duration:280ms;-webkit-transform:translate3d(90.9466px, -52.47586px, 0);transform:translate3d(90.9466px, -52.47586px, 0)}.menu-open:checked ~ .menu-item:nth-child(5){transition-duration:380ms;-webkit-transition-duration:380ms;-webkit-transform:translate3d(90.9466px, 52.47586px, 0);transform:translate3d(90.9466px, 52.47586px, 0)}.menu-open:checked ~ .menu-item:nth-child(6){transition-duration:480ms;-webkit-transition-duration:480ms;-webkit-transform:translate3d(0.08361px, 104.99997px, 0);transform:translate3d(0.08361px, 104.99997px, 0)}.menu-open:checked ~ .menu-item:nth-child(7){transition-duration:580ms;-webkit-transition-duration:580ms;-webkit-transform:translate3d(-90.86291px, 52.62064px, 0);transform:translate3d(-90.86291px, 52.62064px, 0)}.menu-open:checked ~ .menu-item:nth-child(8){transition-duration:680ms;-webkit-transition-duration:680ms;-webkit-transform:translate3d(-91.03006px, -52.33095px, 0);transform:translate3d(-91.03006px, -52.33095px, 0)}.menu-open:checked ~ .menu-item:nth-child(9){transition-duration:780ms;-webkit-transition-duration:780ms;-webkit-transform:translate3d(-0.25084px, -104.9997px, 0);transform:translate3d(-0.25084px, -104.9997px, 0)}.blue{background-color:#669AE1;box-shadow:3px 3px 0 0 rgba(0, 0, 0, 0.14);text-shadow:1px 1px 0 rgba(0, 0, 0, 0.12)}.blue:hover{color:#669AE1;text-shadow:none}.green{background-color:#70CC72;box-shadow:3px 3px 0 0 rgba(0, 0, 0, 0.14);text-shadow:1px 1px 0 rgba(0, 0, 0, 0.12)}.green:hover{color:#70CC72;text-shadow:none}.red{background-color:#FE4365;box-shadow:3px 3px 0 0 rgba(0, 0, 0, 0.14);text-shadow:1px 1px 0 rgba(0, 0, 0, 0.12)}.red:hover{color:#FE4365;text-shadow:none}.purple{background-color:#C49CDE;box-shadow:3px 3px 0 0 rgba(0, 0, 0, 0.14);text-shadow:1px 1px 0 rgba(0, 0, 0, 0.12)}.purple:hover{color:#C49CDE;text-shadow:none}.orange{background-color:#FC913A;box-shadow:3px 3px 0 0 rgba(0, 0, 0, 0.14);text-shadow:1px 1px 0 rgba(0, 0, 0, 0.12)}.orange:hover{color:#FC913A;text-shadow:none}.lightblue{background-color:#62C2E4;box-shadow:3px 3px 0 0 rgba(0, 0, 0, 0.14);text-shadow:1px 1px 0 rgba(0, 0, 0, 0.12)}.lightblue:hover{color:#62C2E4;text-shadow:none}.credit{margin:24px 20px 120px 0;text-align:right;color:#EEEEEE}.credit a{padding:8px 0;color:#C49CDE;text-decoration:none;transition:all 0.3s ease 0s}.credit a:hover{text-decoration:underline}
