按钮3D分层悬停效果

纯css3实现

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="style.css" /><scriptsrc="https://kit.fontawesome.com/a076d05399.js"charset="utf-8"></script></head><body><div class="icons"><a href="#"><div class="layer"><span></span><span></span><span></span><span></span><span class="fab fa-facebook-f"></span></div><div class="text">Facebook</div></a><a href="#"><div class="layer"><span></span><span></span><span></span><span></span><span class="fab fa-twitter"></span></div><div class="text">Twitter</div></a><a href="#"><div class="layer"><span></span><span></span><span></span><span></span><span class="fab fa-instagram"></span></div><div class="text">Instagram</div></a><a href="#"><div class="layer"><span></span><span></span><span></span><span></span><span class="fab fa-linkedin-in"></span></div><div class="text">Linkedin</div></a><a href="#"><div class="layer"><span></span><span></span><span></span><span></span><span class="fab fa-youtube"></span></div><div class="text">YouTube</div></a></div></body>
</html>

style.css

* {margin: 0;padding: 0;box-sizing: border-box;font-family: "Poppins", sans-serif;
}
html,
body {display: grid;height: 100%;place-items: center;background: #000;
}
.icons {display: inline-flex;
}.icons a {margin: 0 25px;text-decoration: none;color: #fff;display: block;position: relative;
}.icons a .layer {width: 55px;height: 55px;transition: transform 0.3s;
}.icons a:hover .layer {transform: rotate(-35deg) skew(20deg);
}.icons a .layer span {position: absolute;top: 0;left: 0;height: 100%;width: 100%;border: 1px solid #fff;border-radius: 5px;transition: all 0.3s;
}.icons a .layer span.fab {font-size: 30px;line-height: 55px;text-align: center;
}.icons a:hover .layer span:nth-child(1) {opacity: 0.2;
}.icons a:hover .layer span:nth-child(2) {opacity: 0.4;transform: translate(5px, -5px);
}.icons a:hover .layer span:nth-child(3) {opacity: 0.6;transform: translate(10px, -10px);
}.icons a:hover .layer span:nth-child(4) {opacity: 0.8;transform: translate(15px, -15px);
}.icons a:hover .layer span:nth-child(5) {opacity: 1;transform: translate(20px, -20px);
}.icons a:nth-child(1) .layer span,
.icons a:nth-child(1) .text {color: #4267b2;border-color: #4267b2;
}.icons a:nth-child(2) .layer span,
.icons a:nth-child(2) .text {color: #1da1f2;border-color: #1da1f2;
}.icons a:nth-child(3) .layer span,
.icons a:nth-child(3) .text {color: #e1306c;border-color: #e1306c;
}.icons a:nth-child(4) .layer span,
.icons a:nth-child(4) .text {color: #2867b2;border-color: #2867b2;
}.icons a:nth-child(5) .layer span,
.icons a:nth-child(5) .text {color: #ff0000;border-color: #ff0000;
}.icons a:nth-child(1) .layer span {box-shadow: -1px 1px 3px #4267b2;
}.icons a:nth-child(2) .layer span {box-shadow: -1px 1px 3px #1da1f2;
}.icons a:nth-child(3) .layer span {box-shadow: -1px 1px 3px #e1306c;
}.icons a:nth-child(4) .layer span {box-shadow: -1px 1px 3px #4267b2;
}.icons a:nth-child(5) .layer span {box-shadow: -1px 1px 3px #ff0000;
}.icons a .text {position: absolute;height: 30px;left: 50%;bottom: -5px;opacity: 0;transform: translate(-50%);transition: bottom 0.3s ease, opacity 0.3s ease;
}.icons a:hover .text {bottom: -35px;opacity: 1;
}

按钮3D分层悬停效果相关推荐

【每日一练】109—一款炫酷按钮的鼠标悬停效果
文 | 杨小爱写在前面按钮,几乎是任何一个项目都会用到的一个组件,因此,今天,我们来练习一个好玩的鼠标效果,具体效果,请看下面的GIF截图: 我们看完了最终效果,现在,我们一起来看一下它的源码. ...
jquery实现的3D缩略图悬停效果
今天我们要告诉你如何创建一些令人兴奋的3D使用CSS3和jQuery悬停效果.这一想法的灵感来自于凉爽的悬停效果,再给客户做网站的时候用的这样的效果,今天就共享出来在这个效果当中,我将使用的thum ...
最简单的设置按钮的鼠标悬停效果
给Button加上title属性即可! 过于简单,不做demo演示了!
html按钮按下效果_您应该在网站中尝试的8种惊人的HTML按钮悬停效果，让您的网站令人难忘...
HTML按钮悬停效果简介按钮是每个页面,Web应用程序或移动应用程序中经常使用的基本HTML元素. HTML按钮是布局中非常重要的元素,因为在很多情况下,它是用户在呼吁采取行动并说服单击时必须注意到 ...
UI设计素材干货模板|移动按钮的“悬停效果”
标准的屏幕页面许多元素.按钮上的悬停效果可以提供视觉反馈来告知用户可以与之交互的内容.但是有一个问题-悬停效果是针对桌面应用程序的,而不是针对移动应用程序的. 初学者往往掌握不好效果,在移动应用程序上 ...
html鼠标悬停效果_【开发小技巧】023—如何使用HTML和CSS实现3D文字效果
来源 | https://www.geeksforgeeks.org/create-a-3d-text-effect-using-html-and-css/3D文字效果是网页设计领域中最常用的文字效果 ...
如何用纯 CSS 创作小球变矩形背景的按钮悬停效果
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/yxbEzJ 可交互视频 ...
CSS 按钮悬停效果
CSS 按钮悬停效果原视频链接鼠标放入或点击按钮获得焦点后 HTML: <!DOCTYPE html> <html lang="en"><head ...
HTML设置悬停效果,如何使用纯CSS实现按钮的悬停效果
源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读定义dom,容器是一个无序列表,包含4个元素,代表4个按钮: hom ...

按钮3D分层悬停效果

按钮3D分层悬停效果

按钮3D分层悬停效果相关推荐

最新文章

热门文章