HTML+CSS实现按钮手风琴效果

HTML+CSS实现按钮手风琴效果｜青训营笔记

需求描述
HTML部分
CSS部分
完整代码
效果展示

这是我参与「第四届青训营」笔记创作活动的的第7天。

需求描述

实现一排居中的五个图标，默认为圆形图案，鼠标移动到图标后，图标像手风琴一样展开，显示颜色和文字。

HTML部分

引入css库：

      <link rel="stylesheet" href="style.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>

第一个是自定义的css，第二个是外部引用的组件库，提供fab fa-facebook-f等样式。

定义两层盒子，大盒子内包含5个小盒子，小盒子装图标。

      <div class="wrapper"><div class="button"><div class="icon"><i class="fab fa-facebook-f"></i></div><span>Facebook</span></div><div class="button"><div class="icon"><i class="fab fa-twitter"></i></div><span>Twitter</span></div><div class="button"><div class="icon"><i class="fab fa-instagram"></i></div><span>Instagram</span></div><div class="button"><div class="icon"><i class="fab fa-github"></i></div><span>Github</span></div><div class="button"><div class="icon"><i class="fab fa-youtube"></i></div><span>YouTube</span></div></div>

CSS部分

首先导入google font的Poppins字体：

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Poppins', sans-serif;
}

盒子居中显示，背景采用渐变色：

html,body{display: grid;height: 100%;width: 100%;place-items: center;background: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%);
}

定义两个盒子wrapper和button，设置hover宽度变化：

.wrapper .button{display: inline-block;height: 60px;width: 60px;float: left;margin: 0 5px;overflow: hidden;background: #fff;border-radius: 50px;cursor: pointer;box-shadow: 0px 10px 10px rgba(0,0,0,0.1);transition: all 0.3s ease-out;
}
.wrapper .button:hover{width: 200px;
}

定义按钮颜色变化：

.wrapper .button:nth-child(1):hover .icon{background: #4267B2;
}
.wrapper .button:nth-child(2):hover .icon{background: #1DA1F2;
}
.wrapper .button:nth-child(3):hover .icon{background: #E1306C;
}
.wrapper .button:nth-child(4):hover .icon{background: #333;
}
.wrapper .button:nth-child(5):hover .icon{background: #ff0000;
}

完整代码

Uestc-xiye/Buttons-with-Hover-Animation: HTML+CSS实现按钮手风琴效果 (github.com)

效果展示

鼠标放在Github图标上后，按钮展开：

HTML+CSS实现按钮手风琴效果｜青训营笔记相关推荐

构建webpack知识体系 | 青训营笔记
这是我参与「第四届青训营」笔记创作活动的的第4天. 进阶中高级前端工程师,对webpack打包构建工具的掌握是必不可少的.我也曾经看过许多webpack教程,但无非是记记某些模式怎么配置,根本就没有 ...
Android基础第六天｜字节跳动第四届青训营笔记
这是我参与「第四届青训营」笔记创作活动的的第6天端智能技术演进与实践文章目录端智能技术演进与实践课程回顾 01 什么是端智能技术 1.1 端智能是什么? 1.2 为什么要做端智能? 1.3 ...
【Go入门】Socks5代理服务器实现翻译api调用 | 青训营笔记
这是我参与「第三届青训营 -后端场」笔记创作活动的的第一篇笔记. [课程一]Go基础主要内容第一节课主要介绍了go的语法基础,包括变量.循环分支.数组切片.函数方法.错误处理.字符串.格式化处理. ...
Go语言上手（一） | 青训营笔记
这是我参与「第三届青训营 -后端场」笔记创作活动的的第一篇笔记. 文章目录语法速览基础语法第一:类型第二:内置库部分 json库的使用时间库的使用字符串和数字互转 os相关信息实战项目 ...
三个小项目入门Go语言｜字节青训营笔记
前言这是青训营的第一课,今天的课程比较快速的讲解了go语言的入门,并配合三个小的项目实践梳理所学知识点,这里详细回顾一下这三个项目,结合课后作业要求做一些代码补充,并附上自己的分析,青训期间的所有课 ...
Go语言实战案例 | 青训营笔记
这是我参与「第五届青训营」伴学笔记创作活动的第 2 天前言在上一篇笔记中,已经总结了 Go 语言的基础语法和一些常见标准库的使用方法,本文主要基于之前的基础,通过两个实战的例子对 Go 的基础语 ...
字节跳动青训营笔记01
大家好,这里是我参加字节跳动[第五期青训营]的第一篇笔记.一小时多的课程里实现了快速入门Go语言,简要介绍了Go的优点,语法,包括与C语言的异同,以及map.切片等常用的数据结构:后半节课程主要介绍了 ...
GO语言的实战学习(猜谜游戏和在线词典)｜青训营笔记
一.GO语言的实战学习 1.1 前言在上文我们急速学习了Go语言的入门,今天我们来学习一下Go语言的实战本专栏代码,源码打包下载地址如下: https://download.csdn.net/do ...
走进后端开发流程｜青训营笔记
目录一.走进后端开发流程 1.传统流程 2.敏捷开发 3.SAFe简介 4.字节团队的开发流程二.开发流程详解 1.需求阶段 2.开发阶段云原生开发团队的分支策略自测 3.测试阶段 4.发布 ...

HTML+CSS实现按钮手风琴效果｜青训营笔记

HTML+CSS实现按钮手风琴效果｜青训营笔记

需求描述

HTML部分

CSS部分

完整代码

效果展示

HTML+CSS实现按钮手风琴效果｜青训营笔记相关推荐

最新文章

热门文章

HTML+CSS实现按钮手风琴效果 ｜ 青训营笔记

HTML+CSS实现按钮手风琴效果 ｜ 青训营笔记

需求描述

HTML部分

CSS部分

完整代码

效果展示

HTML+CSS实现按钮手风琴效果 ｜ 青训营笔记相关推荐

最新文章

热门文章

HTML+CSS实现按钮手风琴效果｜青训营笔记

HTML+CSS实现按钮手风琴效果｜青训营笔记

HTML+CSS实现按钮手风琴效果｜青训营笔记相关推荐