HTML5+CSS3小实例：新拟态按钮

最新推荐文章于 2024-03-11 11:14:17 发布

糕手糕糕

最新推荐文章于 2024-03-11 11:14:17 发布

阅读量414

点赞数 7

分类专栏： HTML5+CSS3+JS 小实例文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/Guard_56/article/details/136509513

版权

HTML5+CSS3+JS 小实例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果：
源码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拟态风格按钮效果</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
       <div class="container">
            <div class="btn">
                <div class="icon">
                    <img src="./imgs/1.png" alt="">
                </div>
                <span>语音</span>
            </div>
            <div class="btn">
                <div class="icon">
                    <img src="./imgs/2.png" alt="">
                </div>
                <span>通讯录</span>
            </div>
            <div class="btn">
                <div class="icon">
                    <img src="./imgs/3.png" alt="">
                </div>
                <span>电话</span>
            </div>
            <div class="btn">
                <div class="icon">
                    <img src="./imgs/4.png" alt="">
                </div>
                <span>信息</span>
            </div>
            <div class="btn">
                <div class="icon">
                    <img src="./imgs/5.png" alt="">
                </div>
                <span>浏览器</span>
            </div>
            <div class="btn">
                <div class="icon">
                    <img src="./imgs/6.png" alt="">
                </div>
                <span>相机</span>
            </div>
            <div class="btn">
                <div class="icon">
                    <img src="./imgs/7.png" alt="">
                </div>
                <span>图片</span>
            </div>
            <div class="btn">
                <div class="icon">
                    <img src="./imgs/8.png" alt="">
                </div>
                <span>日历</span>
            </div>
            <div class="btn">
                <div class="icon">
                    <img src="./imgs/9.png" alt="">
                </div>
                <span>闹钟</span>
            </div>
       </div>
</body>
</html>

css:

html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efeeee;
}

.container {
  display: flex;
  flex-wrap: wrap;
  width: 450px;
}

.btn {
  width: 100px;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin: 25px;

}

.icon {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.2),
    -18px -18px 30px rgba(255, 255, 255, 1);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease-out;
}

.icon:hover {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8),
    inset 18px 18px 30px rgba(0, 0, 0, 0.1),
    inset -18px -18px 30px rgba(255, 255, 255, 1);
}

.icon img {
  width: 60px;
  height: 60px;
}

span {
  color: #708090;
}