Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Button Hover/Click Effects
Successful
Sticky
Successful
Shards
Successful
Left
Successful
Square
Successful
Line
css
@import url(https://fonts.googleapis.com/css?family=Oswald|Roboto); :root { --animation-time: 1s; --animation-time-delay-a: 0.1s; --animation-time-delay-b: 0.2s; --animation-time-delay-c: 0.3s; } html { height: 100%; } body { font-family: Roboto, sans-serif; color: #515a6e; background-color: #e7ebff; height: 100%; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; } .c-container { text-align: center; padding-bottom: 80px; } .c-container .c-btn { margin: 10px; } .c-title { text-align: center; } .c-btn { font-size: 18px; line-height: 36px; font-weight: 500; max-width: 240px; text-decoration: none; display: -webkit-inline-box; display: inline-flex; position: relative; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; box-sizing: border-box; min-width: 35px; border: none; outline: none; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-appearance: none; overflow: visible; vertical-align: middle; white-space: nowrap; overflow: hidden; } .c-btn_icon { pointer-events: none; position: absolute; left: 50%; top: 0; margin-left: -145px; width: auto; height: 100%; z-index: 1; } .c-btn_text { box-sizing: border-box; display: block; width: 100%; padding: 0 12px 0 12px; border-radius: var(--border-radius); -webkit-transition: all var(--animation-time); transition: all var(--animation-time); } .c-btn_text--next { width: auto; position: absolute; bottom: 100%; left: 0; z-index: 2; } .c-btn_sticky { color: #fff; background: -webkit-gradient(linear, left top, left bottom, from(#72abff), to(#1e5ce4)); background: linear-gradient(#72abff, #1e5ce4); box-shadow: 0 2px 12px -3px #1e5ce4; } .c-btn_sticky:hover .icon-sticky { -webkit-transform: translateY(-70%); transform: translateY(-70%); } .c-btn_sticky.active .icon-sticky { -webkit-transform: translateY(0%); transform: translateY(0%); } .c-btn_sticky.active .c-btn_text { -webkit-transform: translateY(100%); transform: translateY(100%); } .icon-sticky { height: 200%; -webkit-transition: all var(--animation-time); transition: all var(--animation-time); -webkit-transform: translateY(-100%); transform: translateY(-100%); } .icon-sticky path { fill: #1850cb; } .c-btn_shards { color: #fff; background: -webkit-gradient(linear, left top, left bottom, from(#ff66cc), to(#ff6666)); background: linear-gradient(#ff66cc, #ff6666); box-shadow: 0 2px 12px -3px #ff6666; } .c-btn_shards:hover path { -webkit-transform: translateY(0); transform: translateY(0); } .c-btn_shards.active path { -webkit-transform: translateY(80px); transform: translateY(80px); } .c-btn_shards.active .c-btn_text { -webkit-transform: translateY(100%); transform: translateY(100%); } .icon-shards { margin-left: -123px; } .icon-shards path { fill: #ffffff; opacity: 0.4; transform-box: fill-box; -webkit-transform-origin: center; transform-origin: center; -webkit-transition: all var(--animation-time); transition: all var(--animation-time); -webkit-transform: translateY(-80px); transform: translateY(-80px); } .icon-shards path:nth-child(2n) { -webkit-transition-delay: var(--animation-time-delay-a); transition-delay: var(--animation-time-delay-a); } .icon-shards path:nth-child(3n) { -webkit-transition-delay: var(--animation-time-delay-b); transition-delay: var(--animation-time-delay-b); } .icon-shards path:nth-child(4n) { -webkit-transition-delay: var(--animation-time-delay-c); transition-delay: var(--animation-time-delay-c); } .c-btn_square { color: #fff; background: -webkit-gradient(linear, left top, left bottom, from(#ff9900), to(#ff5050)); background: linear-gradient(#ff9900, #ff5050); box-shadow: 0 2px 12px -3px #ff5050; } .c-btn_square:hover rect { -webkit-transform: scale(1); transform: scale(1); } .c-btn_square.active rect { -webkit-transform: scale(0); transform: scale(0); } .c-btn_square.active .c-btn_text { -webkit-transform: translateY(100%); transform: translateY(100%); } .icon-square { margin-left: -144px; } .icon-square rect { fill: #ffffff; opacity: 0.3; transform-box: fill-box; -webkit-transform-origin: center; transform-origin: center; -webkit-transition: all var(--animation-time); transition: all var(--animation-time); -webkit-transform: scale(0); transform: scale(0); } .icon-square rect:nth-child(2n) { -webkit-transition-delay: var(--animation-time-delay-a); transition-delay: var(--animation-time-delay-a); } .icon-square rect:nth-child(3n) { -webkit-transition-delay: var(--animation-time-delay-b); transition-delay: var(--animation-time-delay-b); } .icon-square rect:nth-child(4n) { -webkit-transition-delay: var(--animation-time-delay-c); transition-delay: var(--animation-time-delay-c); } .c-btn_left { box-shadow: 0 2px 12px -3px #1fa3ca; background: #4D74F7; } .c-btn_left .c-btn_text { -webkit-transform: translateX(0); transform: translateX(0); color: #fff; background: -webkit-gradient(linear, left top, left bottom, from(#3bbca5), to(#1fa3ca)); background: linear-gradient(#3bbca5, #1fa3ca); } .c-btn_left .c-btn_text--next { bottom: 0; right: 100%; left: auto; color: #fff; background: #4D74F7; } .c-btn_left:hover .icon-left { -webkit-transform: translateX(0); transform: translateX(0); } .c-btn_left.active .icon-left { -webkit-transform: translateX(-2px); transform: translateX(-2px); } .c-btn_left.active .c-btn_text { -webkit-transform: translateX(100%); transform: translateX(100%); } .c-btn_left.active .c-btn_text--next { -webkit-transform: translateX(100%); transform: translateX(100%); } .icon-left { margin-left: 0; left: 0; z-index: 3; -webkit-transition: all var(--animation-time); transition: all var(--animation-time); -webkit-transform: translateX(-11px); transform: translateX(-11px); } .icon-left .path { fill: #4D74F7; } .c-btn_line { color: #fff; background: -webkit-gradient(linear, left top, left bottom, from(#637dfb), to(#9a0dfe)); background: linear-gradient(#637dfb, #9a0dfe); box-shadow: 0 2px 12px -3px #9a0dfe; } .c-btn_line .c-btn_text { z-index: 2; } .c-btn_line:hover:not(.active) line { stroke-dashoffset: 200; } .c-btn_line.active line { stroke-dashoffset: 1000; } .c-btn_line.active .icon-line { -webkit-transform: translateY(-50%); transform: translateY(-50%); } .c-btn_line.active .c-btn_text { -webkit-transform: translateY(100%); transform: translateY(100%); } .c-btn_line.animated line { stroke-dashoffset: 0; } .icon-line { height: 200%; margin-left: -140px; -webkit-transition: all var(--animation-time); transition: all var(--animation-time); -webkit-transform: translateY(0); transform: translateY(0); } .icon-line line { -webkit-transition: all var(--animation-time); transition: all var(--animation-time); stroke: #9999ff; fill: none; stroke-width: 10px; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; } .icon-line line:nth-child(2n) { -webkit-transition-delay: var(--animation-time-delay-a); transition-delay: var(--animation-time-delay-a); opacity: 0.8; } .icon-line line:nth-child(3n) { -webkit-transition-delay: var(--animation-time-delay-b); transition-delay: var(--animation-time-delay-b); opacity: 0.6; } .icon-line line:nth-child(4n) { -webkit-transition-delay: var(--animation-time-delay-c); transition-delay: var(--animation-time-delay-c); opacity: 0.4; } .box-item { position: absolute; bottom: 20px; right: 20px; z-index: 3; } .rabbit { width: 50px; height: 50px; fill: #fff; }
JavaScript
$(".c-btn").click(function(){ var $this = $(this); var btnTextNextWidth = $this.find('.c-btn_text--next').outerWidth(); $this.addClass('active'); $this.animate({ width: btnTextNextWidth }); });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>按钮悬停/点击效果-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号