一.发送效果HTML

// 这里是一个svg的占位

Send

CSS

#send-btn{

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

}

button {

background: #5f55af;

border: 0;

border-radius: 5px;

padding: 10px 30px 10px 20px;

color: white;

text-transform: uppercase;

font-weight: bold;

}

button svg {

display: inline-block;

vertical-align: middle;

padding-right: 5px;

}

button:hover svg {

animation: fly 2s ease 1;

}

@keyframes fly {

0% {

transform: translateX(0%);

}

50% {

transform: translateX(300%);

}

100% {

transform: translateX(0);

}

}

GIF图

二.霓虹效果HTML

Hover me

Hover me

Hover me

CSS

#neon-btn {

display: flex;

align-items: center;

justify-content: space-around;

height: 100vh;

background: #031628;

}

.btn {

border: 1px solid;

background-color: transparent;

text-transform: uppercase;

font-size: 14px;

padding: 10px 20px;

font-weight: 300;

}

.one {

color: #4cc9f0;

}

.two {

color: #f038ff;

}

.three {

color: #b9e769;

}

.btn:hover {

color: white;

border: 0;

}

.one:hover {

background-color: #4cc9f0;

-webkit-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);

-moz-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);

box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);

}

.two:hover {

background-color: #f038ff;

-webkit-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);

-moz-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);

box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);

}

.three:hover {

background-color: #b9e769;

-webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);

-moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);

box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);

}

GIF图

三.边框效果HTML

Hover me

CSS

#draw-border {

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

}

button {

border: 0;

background: none;

text-transform: uppercase;

color: #4361ee;

font-weight: bold;

position: relative;

outline: none;

padding: 10px 20px;

box-sizing: border-box;

}

button::before, button::after {

box-sizing: inherit;

position: absolute;

content: '';

border: 2px solid transparent;

width: 0;

height: 0;

}

button::after {

bottom: 0;

right: 0;

}

button::before {

top: 0;

left: 0;

}

button:hover::before, button:hover::after {

width: 100%;

height: 100%;

}

button:hover::before {

border-top-color: #4361ee;

border-right-color: #4361ee;

transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;

}

button:hover::after {

border-bottom-color: #4361ee;

border-left-color: #4361ee;

transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s;

}

GIF效果

四.圆形效果HTML

// 这里有一个svg元素

Hover me

CSS

#circle-btn {

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

}

.btn-container {

position: relative;

}

button {

border: 0;

border-radius: 50px;

color: white;

background: #5f55af;

padding: 15px 20px 16px 60px;

text-transform: uppercase;

background: linear-gradient(to right, #f72585 50%, #5f55af 50%);

background-size: 200% 100%;

background-position: right bottom;

transition:all 2s ease;

}

svg {

background: #f72585;

padding: 8px;

border-radius: 50%;

position: absolute;

left: 0;

top: 0%;

}

button:hover {

background-position: left bottom;

}

GIF图

五.圆角效果HTML

Hover me

CSS

#border-btn {

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

}

button {

border: 0;

border-radius: 10px;

background: #2ec4b6;

text-transform: uppercase;

color: white;

font-size: 16px;

font-weight: bold;

padding: 15px 30px;

outline: none;

position: relative;

transition: border-radius 3s;

-webkit-transition: border-radius 3s;

}

button:hover {

border-bottom-right-radius: 50px;

border-top-left-radius: 50px;

border-bottom-left-radius: 10px;

border-top-right-radius: 10px;

}

GIF图

六.冰冻效果HTML

Hover me

Hover me

CSS

#frozen-btn {

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

}

button {

border: 0;

margin: 20px;

text-transform: uppercase;

font-size: 20px;

font-weight: bold;

padding: 15px 50px;

border-radius: 50px;

color: white;

outline: none;

position: relative;

}

button:before{

content: '';

display: block;

background: linear-gradient(to left, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.4) 50%);

background-size: 210% 100%;

background-position: right bottom;

height: 100%;

width: 100%;

position: absolute;

top: 0;

bottom:0;

right:0;

left: 0;

border-radius: 50px;

transition: all 1s;

-webkit-transition: all 1s;

}

.green {

background-image: linear-gradient(to right, #25aae1, #40e495);

box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);

}

.purple {

background-image: linear-gradient(to right, #6253e1, #852D91);

box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);

}

.purple:hover:before {

background-position: left bottom;

}

.green:hover:before {

background-position: left bottom;

}

GIF图

七.闪亮效果HTML

Hover me

CSS

#shiny-shadow {

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

background: #1c2541;

}

button {

border: 2px solid white;

background: transparent;

text-transform: uppercase;

color: white;

padding: 15px 50px;

outline: none;

overflow: hidden;

position: relative;

}

span {

z-index: 20;

}

button:after {

content: '';

display: block;

position: absolute;

top: -36px;

left: -100px;

background: white;

width: 50px;

height: 125px;

opacity: 20%;

transform: rotate(-45deg);

}

button:hover:after {

left: 120%;

transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);

-webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);

}

GIF图

八.加载效果HTML

Hover me

CSS

#loading-btn {

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

}

button {

background: transparent;

border: 0;

border-radius: 0;

text-transform: uppercase;

font-weight: bold;

font-size: 20px;

padding: 15px 50px;

position: relative;

}

button:before {

transition: all 0.8s cubic-bezier(0.7, -0.5, 0.2, 2);

content: '';

width: 1%;

height: 100%;

background: #ff5964;

position: absolute;

top: 0;

left: 0;

}

button span {

mix-blend-mode: darken;

}

button:hover:before {

background: #ff5964;

width: 100%;

}

GIF图

总结

巧用伪元素:before、:after等，让你的页面按钮眼前一亮。

到此这篇关于CSS八种让人眼前一亮的HOVER效果的示例代码的文章就介绍到这了,更多相关CSS HOVER效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

html hover 效果,CSS八种让人眼前一亮的HOVER效果的示例代码相关推荐

  1. 8种让人眼前一亮的hover效果--CSS

    文章目录 一.CSS是什么? 二.使用步骤 一.发送效果 二.霓虹效果 三.边框效果 四.圆形效果 五.圆角效果 六.冰冻效果 七.闪亮效果 八.加载效果 总结 一.CSS是什么? CSS 是用来编写 ...

  2. 23种设计模式 UML 类图及对应示例代码 (二)

    23种设计模式 UML 类图及对应示例代码 (二) 11.DoFactory.GangOfFour.Flyweight.Structural Flyweight:运用共享技术有效的支持大量细粒度的对象 ...

  3. html 右上角删除图标,网页制作html+css制作div标签增加右上角删除图标的示例代码...

    一.需求描述 在Div标签的右上角显示删除图标 二.实现方式 html.CSS 三.参考代码 .container{ width:60px; height:60px; border: 1px dott ...

  4. html 右上角删除图标,html+css制作div标签增加右上角删除图标的示例代码_CSS

    一.需求描述 在Div标签的右上角显示删除图标 二.实现方式 html.CSS 三.参考代码 .container{ width:60px; height:60px; border: 1px dott ...

  5. 静态html左侧导航菜单代码,Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码...

    本文介绍了Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码,分享给大家,具体如下: PC端 移动端 代码 左侧导航 *{ margin:0; padding:0; } #header ...

  6. html如何做好看的图片效果,CSS使用图片美化的漂亮菜单效果

    本文实例讲述了CSS使用图片美化的漂亮菜单效果.分享给大家供大家参考.具体如下: 这里介绍的这个菜单很漂亮,因为每个菜单项都是调用的图片,感觉这个菜单有点华而不实,毕竟菜单太多会影响网页加载,一个菜单 ...

  7. html涟漪动画效果,CSS+JS实现水滴涟漪动画按钮效果的示例代码

    代码如下所示: Document .btn{ display: block; width: 300px; height: 100px; margin: 50px; outline: 0; overfl ...

  8. html怎么设置文字滚动效果,css如何实现滚动文字，实现滚动文字的代码

    css如何实现滚动文字,实现滚动文字的代码 发布时间:2020-05-09 10:35:36 来源:亿速云 阅读:228 作者:小新 这篇文章主要为大家详细介绍了css如何实现滚动文字,实现滚动文字的 ...

  9. html中flash的简单动画效果,css实现快速炫酷抖动动画效果

    1.Animate.css简介 Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库.非常适合强调,首页,滑块和引导注意的提示.它是一个来自国外的 CSS3 动画库,它预设了抖动 ...

最新文章

  1. torch.nn.Embedding理解
  2. 【原创】如何在 Linux 下调整可打开文件/文件描述符数目
  3. linux 删除o开头的文件,linux实现除了某个文件或某个文件夹以外的全部删除
  4. Android Binder机制(1501210451 张志康)
  5. 我敢打赌，99%的电子工程师都掉进过这29个坑！
  6. angluar cdk_零分钟即可在容器开发套件（CDK）上实现云运营
  7. 印度软件和中国软件工程师_印度社区如何支持隐私和软件自由
  8. 触发器_PLCDCS组态中SR触发器介绍
  9. C++类的成员变量和成员函数的介绍
  10. sqlserver的for xml path和mysql的group_concat的区别
  11. ios去掉字符串中的某个字符_Python中有用的字符串方法
  12. 小甲鱼OD使用教程七----破解VisualSite Designer
  13. 【Visual C++】游戏开发笔记三十五 站在巨人的肩膀上 游戏引擎导论
  14. [置顶] 【原创】无线LED条屏信息报警项目---2012.05
  15. python网页登录验证码_15.Python实现识别登录验证码（入门）
  16. VSCode 和 CMake 搭建嵌入式开发环境
  17. 难道我买了一个假路由器？解决光猫引出的路由器网速很慢的问题
  18. PointWise 18.4 R4 x64
  19. LED灯光偏色的原因
  20. 列表、下标、切片及练习

热门文章

  1. cesium three性能比较_mapboxgl + three 动画 — 网格热图
  2. 洛谷 P2163 [SHOI2007]园丁的烦恼 （离线sort，树状数组，解决三维偏序问题）
  3. 2019ICPC南京网络赛A题 The beautiful values of the palace(三维偏序)
  4. aistudio/jupyter 相关
  5. 【Android】隐藏底部虚拟按键
  6. 在linux oracle 10g/11g x64bit环境中，goldengate随os启动而自己主动启动的脚本
  7. 关于HTML使用ComDlg ActiveX 无法弹出相应对话框的问题1
  8. [转] Freemarker的常用技巧总结
  9. 如何成为一名受欢迎的程序员直播者？
  10. SpringMVC项目配置全过程详解