css发光按钮

最新推荐文章于 2024-04-11 14:46:52 发布
最新推荐文章于 2024-04-11 14:46:52 发布
阅读量1.1k 收藏 6
点赞数 2
分类专栏： 前端 html 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48700248/article/details/121343577
版权

html部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
		<title>发光按钮</title>
		<link rel="stylesheet" href="css/index.css">
	</head>
	<body>
		<div class="container">
			<a href="javascript:void(0);">点赞</a>
			<a href="javascript:void(0);">评论</a>
			<a href="javascript:void(0);">转发</a>
			<a href="javascript:void(0);">关注</a>
			
		</div>
	</body>
</html>

css部分：

*{
	/* 初始化，清除页面元素的内外边距 */
	padding: 0;
	margin: 0;
	
}
.container{
	/* 弹性元素 让页面元素垂直水平居中 */
	display: flex;
	justify-content: center;
	align-items: center;
	/* 子元素垂直排列 */
	flex-direction: column;
	/* 宽站浏览器可视窗口总宽度 */
	width: 100 vm;
	height: 100vh;
	background-color: #000000;
}
.container a{
	/* 相对定位 */
	position: relative;
	/* 将行内元素转化成块级元素 不然无法设置宽高 */
	display: block;
	width: 140px;
	height: 60px;
	/* 行高 */
	line-height: 60px;
	text-align: center;
	margin: 40px;
	color: aquamarine;
	font-size: 20px;
	text-decoration: none;
	transition: all 0.5s ease-in-out;
/* 	filter: hue-rotate(calc(var(--i)*60deg)); */
}
.container a::before,.container a::after{
	/*将伪元素的相同部分写在一起 */
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	border: 1px solid aquamarine;
	transition: all 0.5s ease-in-out;
}
.container a::before{
	top: 0;
	left: 0;
	/* 删除左边的伪元素的右边和下边边框 */
	border-bottom: 0;
	border-right: 0;
}
.container a::after{
	right: 0;
	bottom: 0;
	/* 删除右边伪元素的上边和左边的边框 */
	border-top: 0;
	border-left: 0;
}
.container a:hover{
	background-color: aquamarine;
	color: #000000;
	/* 加发光效果和下面的倒影 模糊度加到50px */
	box-shadow: 0 0 50px aquamarine;
	-webkit-box-reflect: below 1px 
	linera-gradient(transparent,rgba(0,0,0,.3));
	/* below是下倒影 1px是倒影的元素相隔的距离  最后时渐变的颜色*/
	transition-delay: 0.4s;
}

效果图：
在这里插入图片描述

杨羊羊咩咩～
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 流光发光按钮
特创数字
01-13 252
【代码】CSS 流光发光按钮。
纯CSS3实现发光动画按钮特效
04-16
解压密码：RJ4587 这是一款基于纯CSS3的发光按钮，按钮发光的颜色是随机的，这样一排按钮就显得五彩缤纷，非常绚丽。之前我们也介绍过不少样式很独特的CSS3按钮，比如纯CSS3 3D开关按钮、纯CSS3实现动感弹性按钮等，都非常不错，也有HTML5动画按钮，大家可以自己看看。
用css3动画做一个会发光的按钮特效
xy123boy的博客
06-09 895
【代码】用css3动画做一个会发光的按钮特效。
CSS实现“圆角渐变色边框+内发光效果”的“透明”按钮
最新发布
Demmoi的博客
04-11 149
这只是折中方案，因为并没有实现背景全透明的效果。
CSS闪亮的按钮
qq_52899829的博客
12-08 347
HTML代码： <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/Shiny_button.css" /> </head> <body> <a href="#">Button</a> </body> </html>
CSS3实现发光按钮效果动画
CodingNoob
09-01 2376
在平时看到抽奖，或者一些活动内容页面，我们经常会看到一些发光效果的按钮，视觉上引导用户去点击，这种效果主要是利用css3的动画效果去实现，关键帧放大元素尺寸和改变元素的不透明度，还有就是渐变拉伸去设置对应的按钮渐变...
css3会发光的按钮
xx820702的博客
06-02 191
css3
HTML-CSS-流光按钮
冰霜的博客
02-27 339
流光按钮(可以直接用附注释) HTML代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>css_流光按钮</title> <li
css3：发光按钮、漂亮的登录框、满意的404、带动画的输入框
手写我对你的温柔
05-24 1774
1.发光按钮 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>发光按钮</title> <link href="https://cdn.boo.
CSS实现动态光效按钮
CvtNhso的博客
12-29 464
【代码】CSS实现动态光效按钮。
css特效之炫酷的发光按钮
前端新视界
10-30 532
css特效之炫酷的发光按钮
纯CSS3实现的点击发光按钮特效
01-16
纯CSS3实现的点击发光按钮特效，供大家一起共同分享学习。
HTML5 css3 发光按钮特效.rar
07-10
HTML5 css3 发光按钮特效，在鼠标单击按钮的瞬间，会发光白光，鼠标单击动作完成的话，发光效果就消失了。适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。
CSS3发光按钮特效代码
06-12
CSS3 Animation属性发光按钮代码，不兼容Firefox浏览器。
纯CSS3发光分享按钮的实现教程
09-25
**纯CSS3发光分享按钮实现详解** 在网页设计中，吸引用户注意力的元素往往能提升用户体验，发光分享按钮就是一种常见的交互元素。本教程将详细讲解如何使用纯CSS3技术来创建具有点击发光效果的分享按钮，无需...
CSS3紫色发光按钮悬停特效
06-24
CSS3紫色发光按钮悬停特效是一款紫色线框按钮，带悬停发光遮罩动画特效。
css3悬停按钮变形发光特效
06-24
css3悬停按钮变形发光特效是一款基于css3 transform属性制作的四款不同方向按钮效果。
CSS3 3D发光按钮 立体感十分强烈
04-16
解压密码：RJ4587 这是一款很特别的CSS3按钮，按钮整体是灰黑色主题，每一个按钮在按下时有非常漂亮的3D效果，并且按钮上的文字也有发光的特效。这款CSS3 3D按钮和之前介绍的几款按钮类似，都可以在点击按钮的时候让...
css实现流光按钮
weixin_45727272的博客
04-11 881
实现效果如下图：鼠标悬浮，按钮开始变化流光展示炫酷效果提示：以下是本篇文章的代码内容,供大家参考,相互学习设置元素不响应元素,看得见摸不着,pointer-events 属性定义元素是否对指针事件做出反应。可选:auto:默认值。元素对指针事件做出反应，比如 :hover 和 click。none:元素不对指针事件做出反应。initial:将此属性设置为其默认值。inherit:从其父元素继承此属性。input:focus 选择器:选择已被选中的input。
vscode+css做鼠标悬停发光按钮
06-06
好的，以下是实现鼠标悬停发光按钮的步骤： 1. 在 VS Code 中创建一个 HTML 文件，并在 `<head>` 标签中引入 CSS 文件。 2. 在 HTML 文件中添加一个按钮元素。 3. 在 CSS 文件中设置按钮的样式，包括宽度、高度、边框、背景色等。 4. 使用 CSS 的 `:hover` 伪类实现鼠标悬停时按钮的样式变化，例如改变背景色、边框颜色等。 5. 使用 CSS 的 `box-shadow` 属性实现鼠标悬停时按钮的发光效果。 下面是一个示例代码，你可以参考一下： HTML 文件： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Glowing Button on Hover</title> <link rel="stylesheet" href="style.css"> </head> <body> <button class="glow-btn">Hover Me</button> </body> </html> ``` CSS 文件： ``` /* 按钮样式 */ .glow-btn { display: inline-block; width: 200px; height: 50px; border: 2px solid #ccc; background-color: #fff; color: #333; font-size: 18px; text-align: center; text-decoration: none; cursor: pointer; transition: all 0.2s ease-in-out; } /* 鼠标悬停时按钮样式 */ .glow-btn:hover { background-color: #f00; color: #fff; border-color: #f00; box-shadow: 0 0 10px #f00; } ``` 以上代码实现了一个鼠标悬停发光按钮，你可以将其复制到你的项目中并根据需要进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值