悬浮按钮样式

实现效果

HTML代码

CSS代码

实现效果

HTML代码

<!DOCTYPE html>
<head><link rel="stylesheet" href="demo.css"><script src="demo.js"></script>
</head>
<body><div id="float-btn"><img src="service.png" width="40px" height="40px"></div>
</body>
</html>

1. 主要针对div元素进行设置，img这里只是摆设。

2. service.png图片下载地址为：https://www.easyicon.net/1258210-customer_service_icon.html

CSS代码

#float-btn {/* 设置形状及阴影 */width: 50px;height: 50px;border-radius: 50%;background-color: white;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);/* 使img元素居中 */display: flex;align-items: center;justify-content: center;/* 设置按钮的位置 */position: fixed;right: 20px;bottom: 20px;/* 设置过渡属性 */transition: width 0.5s, height 0.5s;
}#float-btn:hover {/* 鼠标悬停时 */width: 60px;height: 60px;
}#float-btn:active {/* 鼠标点击时 */background-color: whitesmoke;
}

1. 设置div元素的宽高，圆角，背景颜色及阴影。

2. 使用flex布局，使img元素居中。

3. 设置position属性，固定位置，使按钮处于屏幕右下角。

4. 添加了过渡属性，当鼠标停在按钮上时，按钮会变大。

5. 鼠标点击div元素时，颜色由white变成whitesmoke，达到按钮点击的视觉效果。

《CSS实战案例汇总》悬浮按钮样式相关推荐

《CSS实战案例汇总》涟漪
涟漪实现效果 HTML代码 CSS代码实现效果 HTML代码 <!DOCTYPE html> <head><link rel="stylesheet&quo ...
怎么修改谷歌浏览器文件提交按钮样式_使用css自定义input file浏览按钮样式
前言文件上传用途非常广泛,浏览器自带文件控件不太美观,很多时候不能满足需求,需要自定义input [type=file]的样式. 不同浏览器的file控件表现形式不一样火狐谷歌 IE 不同浏览器 ...
【大数据AI人工智能】大数据处理实战案例汇总
大数据处理实战案例汇总本文总结了一系列大数据处理相关的实战案例,让你一目了然地了解大数据处理技术. 文章目录大数据处理实战案例汇总 1. 谷歌搜索引擎 2. Facebook实时动态 3. Net ...
实战案例汇总，Java架构师实战视频教程
很多人想进阶Java架构师,但确找不到正确的学习方法和资料,一直停留在原地,很是困惑.别慌,经过小编不懈的努力,终于为大家找到了这套最新最简洁最系统的进阶Java架构师的自学教程. 本教程资料通过真实 ...
用纯CSS和DIV绘制播放按钮样式
最近在做前端的视屏监控播放对接,前端弄了个播放按钮,记录下,效果如图所示: HTML代码: <div className="box"><div className ...
Python实战案例汇总，带你轻松从入门到实战
Python 的火热,不仅让很多小白选手有了想学习的欲望,甚至连 BAT 的技术大牛,也将 Python 作为第二开发语言来提升自己. 虽然 Python 以简单易学著称,但是你知道如何快速学会 Py ...
Flutter悬浮按钮FloatingActionButton使用详解
1.普通用法 1 2 3 4 5 6 floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onP ...
微信小程序项目实战知识点总结(swiper组件自适应高度，自定义弹出层，悬浮按钮，虚拟键盘)...
1.小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度 height:100vh; 2.微信小程序自定义弹出层,参考网址:https://blog.cs ...
html5页面结构案例,前端学习笔记（五）HTML+CSS静态页面实战案例：幸福西饼首页和百度首页...
按照知乎上面汪小黑推荐的前端学习路径,在自学了HTML和CSS之后,开始尝试实战制作静态页面小项目. 幸福西饼首页制作首先我在网上下载到了千锋教育提供的的幸福西饼官网静态页面的教学视频和图片素材.源 ...
一定能用到的简单但实用的五种按钮样式（原生HTML+CSS步骤详解，含详细注释）
前言一按钮在前端开发中往往是一个必不可少的元素,也有许多精美好看的样式资源供开发者直接使用.但博主认为,对于初学者而言,总是去cv别人做好的,而不理解其中的原理,是很不好的. 本人作为一名计 ...

《CSS实战案例汇总》悬浮按钮样式

悬浮按钮样式

实现效果

HTML代码

CSS代码

《CSS实战案例汇总》悬浮按钮样式相关推荐

最新文章

热门文章