HTML_炫酷的按钮样式

html部分

<a href="#"><span></span><span></span><span></span><span></span>Neon button</a><a href="#"><span></span><span></span><span></span><span></span>Neon button</a><a href="#"><span></span><span></span><span></span><span></span>Neon button</a>

css部分

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
*{margin: 0;padding: 0;box-sizing: border-box;
}
body{display: flex;justify-content: center;align-items: center;height: 100vh;background: #050801;font-family: 'Raleway', sans-serif;font-weight: bold;
}
a{position: relative;display: inline-block;padding: 25px 30px;margin: 40px 0;color: #03e9f4;text-decoration: none;text-transform: uppercase;transition: 0.5s;letter-spacing: 4px;overflow: hidden;margin-right: 50px;}
a:hover{background: #03e9f4;color: #050801;box-shadow: 0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 50px #03e9f4,0 0 200px #03e9f4;-webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
a:nth-child(1){filter: hue-rotate(270deg);
}
a:nth-child(2){filter: hue-rotate(110deg);
}
a span{position: absolute;display: block;
}
a span:nth-child(1){top: 0;left: 0;width: 100%;height: 2px;background: linear-gradient(90deg,transparent,#03e9f4);animation: animate1 1s linear infinite;
}
@keyframes animate1{0%{left: -100%;}50%,100%{left: 100%;}
}
a span:nth-child(2){top: -100%;right: 0;width: 2px;height: 100%;background: linear-gradient(180deg,transparent,#03e9f4);animation: animate2 1s linear infinite;animation-delay: 0.25s;
}
@keyframes animate2{0%{top: -100%;}50%,100%{top: 100%;}
}
a span:nth-child(3){bottom: 0;right: 0;width: 100%;height: 2px;background: linear-gradient(270deg,transparent,#03e9f4);animation: animate3 1s linear infinite;animation-delay: 0.50s;
}
@keyframes animate3{0%{right: -100%;}50%,100%{right: 100%;}
}a span:nth-child(4){bottom: -100%;left: 0;width: 2px;height: 100%;background: linear-gradient(360deg,transparent,#03e9f4);animation: animate4 1s linear infinite;animation-delay: 0.75s;
}
@keyframes animate4{0%{bottom: -100%;}50%,100%{bottom: 100%;}
}

效果

点击时

HTML_炫酷的按钮样式相关推荐

Web前端——用CSS的常用样式制作一个炫酷的按钮
文章目录笔记:CSS的常用样式炫酷按钮效果实现笔记:CSS的常用样式边框以及弧度样式 border-width:边框的线条宽度. border-style:边框的样式,例如 solid实现 d ...
超酷的计步器APP（一）——炫酷功能实现，自定义水波纹特效、自定义炫酷开始按钮、属性动画的综合体验
超酷的计步器APP(一)--炫酷功能实现,自定义水波纹特效.自定义炫酷开始按钮.属性动画的综合体验好久没写博客了,没给大家分享技术了,真是有些惭愧.这段时间我在找工作,今年Android的行情也不怎 ...
wordpress字体样式——css炫酷的字体样式实现
demo1:css实现颜色变化效果如图所示实现代码如下 <!DOCTYPE html> <html lang="en"> <head>< ...
LaTeX技巧005：定制自己炫酷的章节样式实例
示例一: 实现代码: 1 \usepackage[Lenny]{fncychap} 示例二: 实现代码: 1 \usepackage[avantgarde]{quotchap} 2 \renewcom ...
web设置网页背景为好看炫酷的渐变色样式
效果图: 源代码: <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
那些你不知道的炫酷按钮交互效果
在日常开发中肯定都遇到过不少有按钮交互的地方,但你有用到什么炫酷的交互效果吗?日常开发中想必最多的就是点击按钮背景文字变色,阴影,按钮按下,加载中之类的效果,相对都比较平平无奇,都是一些按部就班的效果 ...
利用CSS变量实现炫酷的悬浮效果
最近,我从 Grover网站上发现以一个好玩儿的悬停动画,也有了些自己的灵感.这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变.这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意 ...
css初始化_利用CSS变量实现炫酷的悬浮效果
这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变.这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了,增加了点击的概率. 怎样才能达到这个效果,使我们的网站脱颖而出呢?其实 ...
php漂亮按钮代码,分享一款金属感十足的按钮样式代码
在项目中,几乎所有的网站都会用到按钮,多则十几个,少则几个.一个实用又好看的按钮,能给页面增色不少,从而更能吸引用户的眼球.在浏览网站的时候,看到一些好看的,炫酷的按钮,拿过来和大家分享分享,下次如果 ...
【全网最全的博客美化系列教程】06.推荐和反对炫酷样式的实现
全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...

HTML_炫酷的按钮样式

HTML_炫酷的按钮样式相关推荐

最新文章

热门文章