CSS3 按钮悬停（Hover）效果大全

最全的按钮悬停效果集合，可应用于动作（actions），按钮（buttons），图标（logos），图像（images）等界面元素。包含箭头、脉冲、颜色填充、卷角、3D悬浮阴影、下划线延伸、图标动画、晃动、旋转、扭曲等。

css3, hover

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 49850
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto);
body {
    margin: 0;
    padding: 40px 0 0 0;
    font-family: sans-serif;
    color: #333;
    line-height: 140%;
    background: white;
}
hr {
    margin-top: 2em;
    background-color: #ddd;
    border: none;
    height: 1px;
}
.sep {
    color: #ddd;
    margin: 0 4px;
}
.carbon-ad.ad {
    position: relative;
    display: block;
    box-sizing: border-box;
    max-width: 320px;
    margin: 0 auto;
    margin-top: 6em;
    padding: 1em 2.5em;
    padding-top: 2em;
    text-align: center;
    font-size: 14px;
}
.carbon-ad-label {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin: 0;
    margin-bottom: 2px;
    font-size: 11px;
    text-align: center;
    color: #999;
}
.carbon-ad .carbon-poweredby {
    margin-bottom: 0;
    font-size: 12px;
}
.carbon-ad .carbon-img {
    margin: 0 auto;
    margin-bottom: .625em;
    background: white;
}
.carbon-ad img {
    display: block;
    border: solid 1px #ddd;
}
.main {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}
.browsehappy {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    padding: 1em;
    background: black;
    color: white;
    text-align: center;
}
img {
    border: none;
}
small {
    display: block;
}
p,
[class^="hvr-"] {
    font-family: 'Roboto', sans-serif;
}
[class^="hvr-"] {
    margin: .4em;
    padding: 1em;
    cursor: pointer;
    background: #e1e1e1;
    text-decoration: none;
    color: #666;
    /* Prevent highlight colour when element is tapped */
    
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* Smooth fonts */
    
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.aligncenter {
    text-align: center;
}
.sup {
    vertical-align: super;
    margin-left: -1em;
    padding: .21875em;
    line-height: 100%;
    font-size: .21875em;
    border: #eee solid 1px;
    border-radius: 4px;
    color: inherit;
}
.sup:hover {
    background: #eee;
}
a {
    color: #2098D1;
    text-decoration: none;
}
.footer a:hover,
.nav:hover {
    color: #207AD1;
}
.nav {
    display: inline-block;
    font-size: .8em;
}
.nav.hvr-icon-down,
.nav.hvr-icon-forward {
    padding-right: 1.2em;
}
.nav.hvr-icon-down::before,
.nav.hvr-icon-forward::before {
    right: 0;
}
.nav:hover,
.nav:focus,
.nav:active {
    text-decoration: none;
}
.intro {
    max-width: 680px;
    margin: 20px auto 0 auto;
}
.button.cta {
    display: inline-block;
    position: relative;
    margin: 1.2em 0 1em 0;
    padding: 1em;
    background: #2098D1;
    border: none;
    text-decoration: none;
    font-weight: 700;
    color: white;
}
.effects {
    margin-top: 6em;
}
h1 {
    text-align: center;
    font-size: 3em;
}
h2 {
    margin-top: 2em;
}
h3 {
    margin: 0;
}
.about {
    border-top: #333 solid 2px;
    border-bottom: #333 solid 2px;
}
.footer {
    overflow: hidden;
    width: auto;
    margin-top: 6em;
    font-size: .9em;
}
.footer a {
    text-decoration: none;
}
.credit {
    font-size: .8em;
    font-weight: normal;
}
.social {
    margin-top: 2.6em;
}
.social-button {
    display: inline-block;
    vertical-align: middle;
}
.twitter-follow-button {
    display: block;
    margin: 0 auto;
}
.follow {
    margin-bottom: 20px;
    line-height: 200%;
}
.made-by {
    display: block;
    margin-top: 3em;
    padding-top: 3em;
    padding-bottom: 1em;
    font-family: $fontFeature;
    font-size: 1.125em;
    text-align: center;
    line-height: 1.6;
    background: #181818;
    color: #777;
}
.made-by svg {
    display: block;
}
.made-by ul,
.made-by p {
    margin: 0;
    padding: 0;
}
.made-by ul {
    margin-bottom: .25em;
}
.made-by li {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}
.made-by p {
    margin-top: .4em;
    font-size: .875em;
}
.made-by a {
    display: inline-block;
    padding: 0 .125em;
    color: #B1B1B1;
    transition-duration: .2s;
    transition-property: color;
}
.made-by a:focus,
.made-by a:hover {
    color: white;
}
.made-by i {
    font-size: 26px;
    height: 30px;
}
.made-by .follow {
    margin-top: 2em;
}
.made-by .follow iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: .5em;
}
.made-by small {
    display: block;
    margin-top: 3em;
    font-size: .625em;
}
@-webkit-keyframes circle {
    50% {
        -webkit-transform: scale(1.26923077);
        transform: scale(1.26923077);
    }
}
@keyframes circle {
    50% {
        transform: scale(1.26923077);
    }
}
@-webkit-keyframes initials {
    50% {
        -webkit-transform: translateY(-8px) translateZ(0);
        transform: translateY(-8px) translateZ(0);
    }
}
@keyframes initials {
    50% {
        transform: translateY(-8px) translateZ(0);
    }
}
.ild-ident {
    display: block;
}
.ild-ident svg {
    display: block;
    overflow: visible;
    transform: scale(1) translateZ(0);
}
.ild-ident .circle-holder {
    transform: translate(-7px, -7px);
}
.ild-ident .circle {
    transform: translate(7px, 7px);
}
.ild-ident .active .i {
    animation: initials .4s ease-in-out;
}
.ild-ident .active .l {
    animation: initials .4s .2s ease-in-out;
}
.ild-ident .active .circle {
    animation: circle .5s .1s ease-in-out;
}

HTML

<h2>2D Transitions</h2>

<a href="#" class="hvr-grow">Grow</a>
    <a href="#" class="hvr-shrink">Shrink</a>
    <a href="#" class="hvr-pulse">Pulse</a>
    <a href="#" class="hvr-pulse-grow">Pulse Grow</a>
    <a href="#" class="hvr-pulse-shrink">Pulse Shrink</a>
    <a href="#" class="hvr-push">Push</a>
    <a href="#" class="hvr-pop">Pop</a>
    <a href="#" class="hvr-bounce-in">Bounce In</a>
    <a href="#" class="hvr-bounce-out">Bounce Out</a>
    <a href="#" class="hvr-rotate">Rotate</a>
    <a href="#" class="hvr-grow-rotate">Grow Rotate</a>
    <a href="#" class="hvr-float">Float</a>
    <a href="#" class="hvr-sink">Sink</a>
    <a href="#" class="hvr-bob">Bob</a>
    <a href="#" class="hvr-hang">Hang</a>
    <a href="#" class="hvr-skew">Skew</a>
    <a href="#" class="hvr-skew-forward">Skew Forward</a>
    <a href="#" class="hvr-skew-backward">Skew Backward</a>
    <a href="#" class="hvr-wobble-horizontal">Wobble Horizontal</a>
    <a href="#" class="hvr-wobble-vertical">Wobble Vertical</a>
    <a href="#" class="hvr-wobble-to-bottom-right">Wobble To Bottom Right</a>
    <a href="#" class="hvr-wobble-to-top-right">Wobble To Top Right</a>
    <a href="#" class="hvr-wobble-top">Wobble Top</a>
    <a href="#" class="hvr-wobble-bottom">Wobble Bottom</a>
    <a href="#" class="hvr-wobble-skew">Wobble Skew</a>
    <a href="#" class="hvr-buzz">Buzz</a>
    <a href="#" class="hvr-buzz-out">Buzz Out</a>
    <a href="#" class="hvr-forward">Forward</a>
    <a href="#" class="hvr-backward">Backward</a>

<h2>Background Transitions</h2>

<a href="#" class="hvr-fade">Fade</a>
    <a href="#" class="hvr-back-pulse">Back Pulse</a>
    <a href="#" class="hvr-sweep-to-right">Sweep To Right</a>
    <a href="#" class="hvr-sweep-to-left">Sweep To Left</a>
    <a href="#" class="hvr-sweep-to-bottom">Sweep To Bottom</a>
    <a href="#" class="hvr-sweep-to-top">Sweep To Top</a>
    <a href="#" class="hvr-bounce-to-right">Bounce To Right</a>
    <a href="#" class="hvr-bounce-to-left">Bounce To Left</a>
    <a href="#" class="hvr-bounce-to-bottom">Bounce To Bottom</a>
    <a href="#" class="hvr-bounce-to-top">Bounce To Top</a>
    <a href="#" class="hvr-radial-out">Radial Out</a>
    <a href="#" class="hvr-radial-in">Radial In</a>
    <a href="#" class="hvr-rectangle-in">Rectangle In</a>
    <a href="#" class="hvr-rectangle-out">Rectangle Out</a>
    <a href="#" class="hvr-shutter-in-horizontal">Shutter In Horizontal</a>
    <a href="#" class="hvr-shutter-out-horizontal">Shutter Out Horizontal</a>
    <a href="#" class="hvr-shutter-in-vertical">Shutter In Vertical</a>
    <a href="#" class="hvr-shutter-out-vertical">Shutter Out Vertical</a>

<h2>Icons</h2>

<small>Font icons courtesy of <a href="https://fortawesome.github.io/Font-Awesome/">FontAwesome</a>. <a href="https://github.com/IanLunn/Hover/#using-fontawesome-with-icon-effects">How to use FontAwesome icons</a> with Hover.css.</small>

<a href="#" class="hvr-icon-back">Icon Back</a>
    <a href="#" class="hvr-icon-forward">Icon Forward</a>
    <a href="#" class="hvr-icon-down">Icon Down</a>
    <a href="#" class="hvr-icon-up">Icon Up</a>
    <a href="#" class="hvr-icon-spin">Icon Spin</a>
    <a href="#" class="hvr-icon-drop">Icon Drop</a>
    <a href="#" class="hvr-icon-fade">Icon Fade</a>
    <a href="#" class="hvr-icon-float-away">Icon Float Away</a>
    <a href="#" class="hvr-icon-sink-away">Icon Sink Away</a>
    <a href="#" class="hvr-icon-grow">Icon Grow</a>
    <a href="#" class="hvr-icon-shrink">Icon Shrink</a>
    <a href="#" class="hvr-icon-pulse">Icon Pulse</a>
    <a href="#" class="hvr-icon-pulse-grow">Icon Pulse Grow</a>
    <a href="#" class="hvr-icon-pulse-shrink">Icon Pulse Shrink</a>
    <a href="#" class="hvr-icon-push">Icon Push</a>
    <a href="#" class="hvr-icon-pop">Icon Pop</a>
    <a href="#" class="hvr-icon-bounce">Icon Bounce</a>
    <a href="#" class="hvr-icon-rotate">Icon Rotate</a>
    <a href="#" class="hvr-icon-grow-rotate">Icon Grow Rotate</a>
    <a href="#" class="hvr-icon-float">Icon Float</a>
    <a href="#" class="hvr-icon-sink">Icon Sink</a>
    <a href="#" class="hvr-icon-bob">Icon Bob</a>
    <a href="#" class="hvr-icon-hang">Icon Hang</a>
    <a href="#" class="hvr-icon-wobble-horizontal">Icon Wobble Horizontal</a>
    <a href="#" class="hvr-icon-wobble-vertical">Icon Wobble Vertical</a>
    <a href="#" class="hvr-icon-buzz">Icon Buzz</a>
    <a href="#" class="hvr-icon-buzz-out">Icon Buzz Out</a>

<h2>Border Transitions</h2>

<a href="#" class="hvr-border-fade">Border Fade</a>
    <a href="#" class="hvr-hollow">Hollow</a>
    <a href="#" class="hvr-trim">Trim</a>
    <a href="#" class="hvr-ripple-out">Ripple Out</a>
    <a href="#" class="hvr-ripple-in">Ripple In</a>
    <a href="#" class="hvr-outline-out">Outline Out</a>
    <a href="#" class="hvr-outline-in">Outline In</a>
    <a href="#" class="hvr-round-corners">Round Corners</a>
    <a href="#" class="hvr-underline-from-left">Underline From Left</a>
    <a href="#" class="hvr-underline-from-center">Underline From Center</a>
    <a href="#" class="hvr-underline-from-right">Underline From Right</a>
    <a href="#" class="hvr-reveal">Reveal</a>
    <a href="#" class="hvr-underline-reveal">Underline Reveal</a>
    <a href="#" class="hvr-overline-reveal">Overline Reveal</a>
    <a href="#" class="hvr-overline-from-left">Overline From Left</a>
    <a href="#" class="hvr-overline-from-center">Overline From Center</a>
    <a href="#" class="hvr-overline-from-right">Overline From Right</a>

<h2>Shadow and Glow Transitions</h2>

<a href="#" class="hvr-shadow">Shadow</a>
    <a href="#" class="hvr-grow-shadow">Grow Shadow</a>
    <a href="#" class="hvr-float-shadow">Float Shadow</a>
    <a href="#" class="hvr-glow">Glow</a>
    <a href="#" class="hvr-shadow-radial">Shadow Radial</a>
    <a href="#" class="hvr-box-shadow-outset">Box Shadow Outset</a>
    <a href="#" class="hvr-box-shadow-inset">Box Shadow Inset</a>

<h2>Speech Bubbles</h2>

<a href="#" class="hvr-bubble-top">Bubble Top</a>
    <a href="#" class="hvr-bubble-right">Bubble Right</a>
    <a href="#" class="hvr-bubble-bottom">Bubble Bottom</a>
    <a href="#" class="hvr-bubble-left">Bubble Left</a>
    <a href="#" class="hvr-bubble-float-top">Bubble Float Top</a>
    <a href="#" class="hvr-bubble-float-right">Bubble Float Right</a>
    <a href="#" class="hvr-bubble-float-bottom">Bubble Float Bottom</a>
    <a href="#" class="hvr-bubble-float-left">Bubble Float Left</a>

<h2>Curls</h2>

<a href="#" class="hvr-curl-top-left">Curl Top Left</a>
    <a href="#" class="hvr-curl-top-right">Curl Top Right</a>
    <a href="#" class="hvr-curl-bottom-right">Curl Bottom Right</a>
    <a href="#" class="hvr-curl-bottom-left">Curl Bottom Left</a>
</div>

最全的按钮悬停效果集合，可应用于动作（actions），按钮（buttons），图标（logos），图像（images）等界面元素。包含箭头、脉冲、颜色填充、卷角、3D悬浮阴影、下划线延伸、图标动画、晃动、旋转、扭曲等。

css3, hover

编辑器支持Emmet

快捷键

最全的按钮悬停效果集合，可应用于动作（actions），按钮（buttons），图标（logos），图像（images）等界面元素。包含箭头、脉冲、颜色填充、卷角、3D悬浮阴影、下划线延伸、图标动画、晃动、旋转、扭曲等。

css3, hover

HTML5 CSS3模糊效果（毛玻璃）的按钮

使用CSS3 mask（蒙版，遮罩）属性实现超酷按钮悬停动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：