CSS技巧专栏一日一例：15 -纯CSS实现立体形状的按钮特效.zip
资源内容介绍
资源介绍：CSS技巧专栏一日一例：15 -纯CSS实现立体形状的按钮特效 ，需要看看效果的，可以移步到我的专栏去看看。资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯CSS实现。适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 <!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>CSS技巧专栏：一日一例 15 -纯CSS实现立体形状的按钮特效</title><style>*{ margin:0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} :root{ --main-bg-color: #111; --color:#000; --hover-color:#ff1a75;}body { width:100%; height: auto; background: var(--main-bg-color); }button{ margin: 0.3em; outline: 0; border: none;}.container{ position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; background: #dcdcdc;}.base{ position: relative; padding: 1rem 3rem; font-family: "微软雅黑", sans-serif; font-size: 1.5rem; line-height: 1.5rem; font-weight:700; color: var(--color); cursor: pointer; user-select: none; white-space: nowrap; border-radius: 2rem; text-decoration: none; text-transform:uppercase; transition: all .5s; margin: 1.5rem 2rem;}.cube{ position: relative; background: #fff; transform: rotate(-30deg) skew(25deg); box-shadow: -25px 25px 5px rgba(0, 0, 0, 0.5); transition: all 0.5s ease; border-radius: 0px; bottom:50px; z-index: 9;}.cube::before,.cube::after{ position: absolute; content: ""; left:-35px; top:27px; width: 28.5%; height: 30%; background: #ccc; transform: rotate(90deg) skew(45deg);}.cube::after{ left: -9.5px; top: 55.5px; width: 100%; height: 30%; transform: rotate(0deg) skew(-45deg); transition: all 0.5s ease; }.cube:hover{ color: #660029; text-shadow: -1px -1px 0px rgba(0,0,0,0.3),1px 1px 0px rgba(255,255,255,0.3); background: #ff0066; bottom: 65px; box-shadow: -30px 30px 20px rgba(0, 0, 0, 0.5); transition: all 0.5s ease; }.cube:hover::before,.cube:hover::after{ background: #cc0052; transition: all 0.5s ease; }.cube:hover::after{ background: #b30047;}</style></head><body> <div class="container"> <button class="base cube">你在哪里</button> <button class="base cube">你想干嘛</button> <button class="base cube">你是谁呢</button> <button class="base cube">谁在乎呢</button> <button class="base cube">我是萌新</button> </div> </body></html>