css7种漂亮的按钮hover效果
没有上效果图，需要自己运行
1、第一种
<button>123</button>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#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%;
}
</style>
</head>
<body>
<div id="loading-btn">
<button><span>Hover me</span></button>
</div>
</body>
</html>
2、第二种
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#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);
}
</style>
</head>
<body>
<div id="neon-btn">
<button class="btn one">Hover me</button>
<button class="btn two">Hover me</button>
<button class="btn three">Hover me</button>
</div>
</body>
</html>
3、第三种
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#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;
}
</style>
</head>
<body>
<div id="draw-border">
<button>Hover me</button>
</div>
</body>
</html>
4、第四种
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#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;
}
</style>
</head>
<body>
<div id="circle-btn">
<div class="btn-container">
<!-- // 这里有一个svg元素 -->
<button>Hover me</button>
</div>
</div>
</body>
</html>
5、第五种
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#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 1s;
-webkit-transition: border-radius 1s;
} button:hover {
border-bottom-right-radius: 50px;
border-top-left-radius: 50px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
} </style>
</head>
<body>
<div id="border-btn">
<button>Hover me</button>
</div>
</body>
</html>
6、第六种
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#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;
}
</style>
</head>
<body>
<div id="frozen-btn">
<button class="green">Hover me</button>
<button class="purple">Hover me</button>
</div>
</body>
</html>
7、第七种
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#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);
}
</style>
</head>
<body>
<div id="shiny-shadow">
<button><span>Hover me</span></button>
</div>
</body>
</html>
css7种漂亮的按钮hover效果的更多相关文章
- 【特效】几种实用的按钮hover效果
效果预览:http://www.gbtags.com/gb/rtreplayerpreview-standalone/3095.htm html: <ul class="btn&quo ...
- Web页面中5种超酷的Hover效果
hover 效果能给网页增加一些动态效果,并且使得站点更具有活力.原来的做法是使用javascript来实现这些动态效果,但是随着CSS3的引入和现代浏览器 的支持,我们可以用纯粹的CSS代码来实现这 ...
- CSS八种让人眼前一亮的HOVER效果
一.发送效果 HTML <div id="send-btn"> <button> // 这里是一个svg的占位 Send </button> & ...
- 微信小程序中两种回到顶部按钮的效果实现
一,使用view形式的回到顶部HTML: <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}} ...
- 20个漂亮 CSS3 按钮效果及优秀的制作教程
在这篇文章中,我们编译了一组有用的 CSS3 动画按钮教程和引人注目的实验.正如我们都知道的,CSS3在网页设计方面是最重要和最关键的,可以使您的网站对访客更具吸引力和互动性.你可以学习这些教程和试验 ...
- 36种漂亮的CSS3网页按钮Button样式
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- HTML页面中5种超酷的伪类选择器:hover效果
想在自己的网站中应用超酷的hover效果吗?也许你可以从如下的这些实例中获得一些灵感,如果你喜欢这些效果,也可以直接拷贝代码并应用到你的站点. 给平淡的站点带来活力 hover效果能给网页增加一些动态 ...
- 使用CSS3制作漂亮的按钮
我给大家介绍一下如何使用CSS3来制作一个圆角阴影.渐变色的漂亮的按钮,它不需要任何图片和javascript脚本,只需要CSS3就可以轻松实现按钮效果,并且可以适用于任意HTML元素,想div,sp ...
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
- liMarquee演示12种不同的无缝滚动效果
很实用的一款liMarquee演示12种不同的无缝滚动效果 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="zh-CN"&g ...
随机推荐
- Git镜像网站和Git网站提速方法
最近开始学习使用git,但是因为git是国外的网站,所以基本就是无法访问.如下图: 通过在网上查找资料,我发现了几个访问git的方法. 方法一.通过镜像网站 镜像网站一: https://github ...
- 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-16- iframe操作-监听事件和执行js脚本 （详细教程）
1.简介 前边主要讲解和分享了一下iframe的基础知识,以及一些常见的定位方法,最后进行了一下总结.今天主要来讲解和分享一下如何监听iframe上的事件和在iframe上如何执行JavaScript ...
- CAN304 W2
CAN304 W2 Classical and modern cryptography Classical cryptography 完全依赖于通信双方之间共享的秘密信息(Private-key cr ...
- ChatClient vs ChatModel：开发者必须知道的4大区别!
在 Spring AI/Spring AI Alibaba 框架中,ChatModel 和 ChatClient 都可以实现大模型的文本生成功能,例如聊天机器人,但二者是两种不同层级的 API 封装, ...
- 几分钟了解下java虚拟机--04
方法内联 它的基本思想是在调用某个方法时,不通过跳转指令去执行该方法的代码,而是直接将该方法的代码复制到调用点处.这样可以减少方法调用的开销,包括减少函数调用和返回的指令执行时间,以及减少堆栈操作 方 ...
- Blazor学习之旅(4)数据共享
本篇,我们来了解下在Blazor中数据是如何共享的,组件之间又该如何传递参数. 关于Blazor组件 在 Blazor 中,从名为"组件"的自包含代码部分生成 UI.每个组件都可以 ...
- 从零开始实现简易版Netty(二) MyNetty pipeline流水线
从零开始实现简易版Netty(二) MyNetty pipeline流水线 1. Netty pipeline流水线介绍 在上一篇博客中lab1版本的MyNetty参考netty实现了一个极其精简的r ...
- C# winfrom 通过代码 控件 TableLayoutPanel的行或列 删除 隐藏
删除 tableLayoutPanel1.ColumnStyles.RemoveAt(1); tableLayoutPanel1.Controls.RemoveAt(1) ...
- CF1946C Tree Cutting 题解
CF1946C Tree Cutting 容易发现,如果连通块含有节点数的最小值为 \(x\),并且使用的刀数多于或等于 \(k\),那么 \(x\) 一定可以成为最后的结果.原因是我们可以通过减少一 ...
- 超星学习通逆向接口参数加密分析 - 课程页面切换tab接口
超星的接口分析了很久,分析到这个接口的时候才想到写篇博客,之前的一些接口和分析就没写下来 先开俩坑在这里,等以后再填 1.如何抓安卓APP上HTTPS的包(需ROOT) 2.如何逆向安卓APP 本次分 ...