Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
HOVER ME
HOVER ME
HOVER ME
css
@import 'https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300'; html, body { width: 100%; height: 100%; overflow: hidden; margin: 0; display: flex; flex-direction: column; flex-wrap: wrap; font-family: 'Open Sans Condensed', sans-serif; } div[class*=box] { height: 33.33%; width: 100%; display: flex; justify-content: center; align-items: center; } .box-1 { background-color: #FF6766; } .box-2 { background-color: #3C3C3C; } .box-3 { background-color: #66A182; } .btn { line-height: 50px; height: 50px; text-align: center; width: 250px; cursor: pointer; } /* ======================== BUTTON ONE ======================== */ .btn-one { color: #FFF; transition: all 0.3s; position: relative; } .btn-one span { transition: all 0.3s; } .btn-one::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: all 0.3s; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgba(255,255,255,0.5); border-bottom-color: rgba(255,255,255,0.5); transform: scale(0.1, 1); } .btn-one:hover span { letter-spacing: 2px; } .btn-one:hover::before { opacity: 1; transform: scale(1, 1); } .btn-one::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1; transition: all 0.3s; background-color: rgba(255,255,255,0.1); } .btn-one:hover::after { opacity: 0; transform: scale(0.1, 1); } /* ======================== BUTTON TWO ======================== */ .btn-two { color: #FFF; transition: all 0.5s; position: relative; } .btn-two span { z-index: 2; display: block; position: absolute; width: 100%; height: 100%; } .btn-two::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; transition: all 0.5s; border: 1px solid rgba(255,255,255,0.2); background-color: rgba(255,255,255,0.1); } .btn-two::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; transition: all 0.5s; border: 1px solid rgba(255,255,255,0.2); background-color: rgba(255,255,255,0.1); } .btn-two:hover::before { transform: rotate(-45deg); background-color: rgba(255,255,255,0); } .btn-two:hover::after { transform: rotate(45deg); background-color: rgba(255,255,255,0); } /* ======================== BUTTON THREE ======================== */ .btn-three { color: #FFF; transition: all 0.5s; position: relative; } .btn-three::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.1); transition: all 0.3s; } .btn-three:hover::before { opacity: 0 ; transform: scale(0.5,0.5); } .btn-three::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: all 0.3s; border: 1px solid rgba(255,255,255,0.5); transform: scale(1.2,1.2); } .btn-three:hover::after { opacity: 1; transform: scale(1,1); }
JavaScript
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>简单的CSS按钮悬停效果-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号