霓虹灯效果按钮

最新推荐文章于 2022-09-06 10:47:03 发布

刘蒋的博客

最新推荐文章于 2022-09-06 10:47:03 发布

阅读量248

点赞数

文章标签： css3 html

本文链接：https://blog.csdn.net/weixin_46140106/article/details/106873660

版权

本文介绍如何利用CSS3的动画和过渡效果，为HTML按钮打造出炫酷的霓虹灯效果，包括颜色渐变、闪烁和边框光晕等细节，提升网页界面的视觉吸引力。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>霓虹灯按钮悬停效果</title>
	</head>
	<style>
		body{
		display:flex;
		justify-content: center;/* 弹性盒居个中 */
		background-color: black;
		margin-top: 100px;
		}
		a{
			padding:10px 30px;
			margin-left:50px;
			color:greenyellow;
			text-decoration: none;/* 下划线干掉 */
			font-size: 20px;
			text-transform: uppercase;/* 定义大写字母 */
			transition:0.5s;
			position:relative;
		
		}
		a:hover{
			background-color: greenyellow;
			color:black;
			box-shadow:0 0 50px greenyellow;
			transition-delay: 0.2s;
		}
		
		/* a::before{
			content:'';
			position:absolute;
			top:0;
			left:0;
			width:10px;
			height: 10px;
			border-top:2px solid greenyellow;
			border-left:2px solid greenyellow;
			transition: 0.5S;
		}
		
		a::after{
			content:'';
			position:absolute;
			right:0;
			bottom:0;
			width:10px;
			height: 10px;
			border-bottom:2px solid greeny