html代码:
<div class="buttons"> <button class="fill">fill in</button> <button class="pulse">pulse</button> <button class="close">close</button> <button class="raise">raise</button> <button class="up">fill up</button> <button class="slide">slide</button> <button class="offset">offset</button> </div>css代码：
*{ box-sizing: border-box; } body{ background: #17181c; } .buttons{ margin: 0 auto; width: 1000px; text-align: center; padding-top: 200px; } .buttons .fill{ --color: #a972cb; --hover: #cb72aa; } .buttons .pulse{ --color:#ef6eae; --hover:#ef8f6e; } .buttons .close{ --color:#ff7f82; --hover:#ffdc7f; } .buttons .raise{ --color:#ffa260; --hover:#e5ff60; } .buttons .up{ --color:#e4cb58; --hover:#94e458; } .buttons .slide{ --color:#8fc866; --hover:#66c887; } .buttons .offset{ --color:#19bc8b; --hover:#1973bc; } .buttons button{ background: none; border: 2px solid; line-height: 1; margin: 5px; padding: 15px 35px; color: var(--color); -webkit-transition: 0.25s; position: relative; } .buttons .fill:hover , .fill:focus{ box-shadow: inset 0px 0px 0px 30px var(--hover); } .buttons .pulse:hover , .pulse:focus{ animation: pulse 1s; box-shadow: 0px 0px 0px 20px rgba(255,255,255, 0); } @keyframes pulse{ 0% { box-shadow: 0 0 0 0 var(--hover); } } .buttons button:hover, button:hover{ border-color: var(--hover); color: #fff; } .buttons .close:hover , .close:focus{ box-shadow: inset -55px 0 0 0 var(--hover) , inset 55px 0 0 0 var(--hover); } .buttons .raise:hover , .raise:hover{ box-shadow:0px 6px 4px -3px var(--hover); transform: translateY(-6px); } .buttons .up:hover , .up:focus{ box-shadow: inset 0px -50px 0px 0px var(--hover) ; } .buttons .slide:hover ,.slide:focus{ box-shadow:inset 100px 0px 0px 0px var(--hover); } .buttons .offset{ box-shadow:3px 3px 0px 0px var(--color) ,-3px -3px 0px 0px var(--color); } .buttons .offset:hover , .offset:focus{ box-shadow: 0px 0px 0px var(--hover) , inset 60px 50px 0px 0px var(--hover); }