H5移动web页面触摸按钮效果实现-模拟按钮hover效果实现

最新推荐文章于 2024-07-01 09:54:31 发布

Joshua__Peng

最新推荐文章于 2024-07-01 09:54:31 发布

阅读量3.3w

点赞数

分类专栏： H5 web开发

本文链接：https://blog.csdn.net/junhua_peng/article/details/50663491

版权

本文探讨了如何在H5移动web页面上实现触摸按钮效果，以提供更好的用户体验。由于移动设备缺少鼠标指针，传统的CSS hover效果不适用。作者提出利用CSS的active伪类来替代，以此达到类似的效果。

摘要由CSDN通过智能技术生成

移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活css的active效果，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
		<style>
		 .btn{
		 	display: block;
		 	position: relative;
		 	top: 100px;
		 	margin: 20px;
		 	width: 200px; 
		 	height: 50px;
		 	line-height: 50px;
		 	text-align: center;
		 	border-radius: 5px;
		 	font-size: 18px;
		 	color: salmon;
		 	background-color:

最低0.47元/天解锁文章

Joshua__Peng

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
H5移动web页面触摸按钮效果实现-模拟按钮hover效果实现

移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活css的active效果，代码如下： .btn{ display: block; position: relative; top: 100px; margin: 20px
复制链接

扫一扫

专栏目录