CSS 按钮悬停效果

原视频链接

鼠标放入或点击按钮获得焦点后

HTML：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link href="index.css" rel="stylesheet">
</head><body><button>Indasdvc<span></span></button>
</body></html>

CSS：

* {margin: 0;padding: 0;box-sizing: border-box;
}body {display: flex;justify-content: center;align-items: center;height: 100vh;
}button {position: relative;font-size: 24px;background-color: transparent;border: none;padding: 10px 20px;cursor: pointer;color: skyblue;overflow: hidden;outline: none;/* 点击按钮无边框 */
}button span {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-color: transparent;border: 5px solid skyblue;z-index: -1;
}button span::before {content: '';position: absolute;width: 8%;height: 500%;background-color: white;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(-60deg);/* 以上居中操作 */transition: 0.3s linear;
}button:hover span::before,
button:focus span::before {transform: translate(-50%, -50%) rotate(-90deg);width: 100%;/* width宽度百分百达到覆盖效果 */background-color: skyblue;
}button:hover,
button:focus {color: white;
}

可能有部分代码与原视频有差别，基本效果能实现

CSS 按钮悬停效果相关推荐

如何用纯 CSS 创作小球变矩形背景的按钮悬停效果
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/yxbEzJ 可交互视频 ...
html按钮按下效果_您应该在网站中尝试的8种惊人的HTML按钮悬停效果，让您的网站令人难忘...
HTML按钮悬停效果简介按钮是每个页面,Web应用程序或移动应用程序中经常使用的基本HTML元素. HTML按钮是布局中非常重要的元素,因为在很多情况下,它是用户在呼吁采取行动并说服单击时必须注意到 ...
你没有见过的6个创意CSS链接悬停效果
创建 CSS 链接悬停效果可以为原本平淡无奇的网页添加一些风格.如果您曾经发现自己在尝试制作流畅的悬停效果时遇到了困难,那么我有六个 CSS 效果供您采用并用于您的下一个项目. 滑动高亮链接悬停效果 ...
HTML+CSS鼠标悬停效果
HTML+CSS实现鼠标悬停效果 HTML: <link href="style.css" rel="stylesheet"><a class ...
css 按钮扩散效果,专治按钮效果不明显（扩散动画效果）
效果需求背景由于最近自家小程序用户活跃用户下滑,老板看看自家小程序,发现分享按钮不够明显,于是乎有了下面这段对话. 老板:小明,你过来下,看看这个分享按钮不明显小明:好的,给它点颜色瞧瞧小明 ...
UI设计素材干货模板|移动按钮的“悬停效果”
标准的屏幕页面许多元素.按钮上的悬停效果可以提供视觉反馈来告知用户可以与之交互的内容.但是有一个问题-悬停效果是针对桌面应用程序的,而不是针对移动应用程序的. 初学者往往掌握不好效果,在移动应用程序上 ...
超赞Win10日历悬停效果，爱了爱了(使用HTML、CSS和vanilla JS)
在本文中,我将向您解释我是如何创建自己的Windows 10悬停效果日历的本文可能有点复杂,但这是针对初学者的,如果您已经精通JS,并且知道Grid悬停逻辑,则可以快速遍历代码以了解发生了什么.如果 ...
推荐12个绚丽的CSS3图片悬停效果
CSS3为我们开发提供了很多特效,如鼠标悬停,线性渐变,在web开发早期常用的是鼠标悬停,他是网页制作的常用特效之一,早期使用Flash可以制作非常炫的效果,后来慢慢演变成现在的是图片悬停效果,现在我 ...
【前端实例代码】霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> ...

CSS 按钮悬停效果

CSS 按钮悬停效果

CSS 按钮悬停效果相关推荐

最新文章

热门文章