今天我们整理了10组网页按钮的点击和悬停效果,每组都有不同的特点和创意。下面专家把特效录制成GIF动画,方便大家在线观看。如果想看真正的源代码
1)空间感很强的按钮特效

2)点击涟漪效果

3)泡沫按钮效果

4)遮罩效果按钮

<div class="header">CSS-MASK BUTTON HOVER ANIMATION
( Experimental )</div>
<div class="button-container-1">
<span class="mas">MASK1</span>
<button id='work' type="button" name="Hover">MASK1</button>
</div>
<div class="button-container-2">
<span class="mas">MASK2</span>
<button type="button" name="Hover">MASK2</button>
</div>
<div class="button-container-3">
<span class="mas">MASK3</span>
<button type="button" name="Hover">MASK3</button>
</div>
<div class="footer">Inspired by <a href="https://tympanus.net/codrops/2016/09/29/transition-effect-with-css-masks/">this</a> codrops article</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400');
@import url('https://fonts.googleapis.com/css?family=Roboto:100');
@mixin button($bcolor,
$url,
$x1,
$y1,
$bor,
$col) {
background: $bcolor;
-webkit-mask: url($url);
mask: url($url);
-webkit-mask-size: $x1 $y1;
mask-size: $x1 $y1;
border: $bor;
color: $col;
}
.header {
text-align: center;
font-family: 'Roboto', sans-serif;
font-size: 34px;
margin-top: 12vh;
}
.footer {
text-align: center;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 20px;
margin-top: 15vh;
}
.button-container-1 {
position: relative;
width: 100px;
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 6vh;
overflow: hidden;
border: 1px solid;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 20px;
transition: 0.5s;
letter-spacing: 1px;
border-radius: 8px;
button {
width: 101%;
height: 100%;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 11px;
letter-spacing: 1px;
font-weight: bold;
@include button(#000,
"https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png",
2300%,
100%,
none,
#fff);
cursor: pointer;
-webkit-animation: ani2 0.7s steps(22) forwards;
animation: ani2 0.7s steps(22) forwards;
&:hover {
-webkit-animation: ani 0.7s steps(22) forwards;
animation: ani 0.7s steps(22) forwards;
}
}
}
.button-container-2 {
position: relative;
width: 100px;
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 7vh;
overflow: hidden;
border: 1px solid #000;
font-family: 'Lato', sans-serif;
font-weight: 300;
transition: 0.5s;
letter-spacing: 1px;
border-radius: 8px;
button {
width: 101%;
height: 100%;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 11px;
letter-spacing: 1px;
font-weight: bold;
@include button(#000, "https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/urban-sprite.png",
3000%,
100%,
none,
#fff);
cursor: pointer;
-webkit-animation: ani2 0.7s steps(29) forwards;
animation: ani2 0.7s steps(29) forwards;
&:hover {
-webkit-animation: ani 0.7s steps(29) forwards;
animation: ani 0.7s steps(29) forwards;
}
}
}
.mas {
position: absolute;
color: #000;
text-align: center;
width: 101%;
font-family: 'Lato', sans-serif;
font-weight: 300;
position: absolute;
font-size: 11px;
margin-top: 17px;
overflow: hidden;
font-weight: bold;
}
@-webkit-keyframes ani {
from {
-webkit-mask-position: 0 0;
mask-position: 0 0;
}
to {
-webkit-mask-position: 100% 0;
mask-position: 100% 0;
}
}
@keyframes ani {
from {
-webkit-mask-position: 0 0;
mask-position: 0 0;
}
to {
-webkit-mask-position: 100% 0;
mask-position: 100% 0;
}
}
@-webkit-keyframes ani2 {
from {
-webkit-mask-position: 100% 0;
mask-position: 100% 0;
}
to {
-webkit-mask-position: 0 0;
mask-position: 0 0;
}
}
@keyframes ani2 {
from {
-webkit-mask-position: 100% 0;
mask-position: 100% 0;
}
to {
-webkit-mask-position: 0 0;
mask-position: 0 0;
}
}
a{
color:#00ff95;
}
.button-container-3 {
position: relative;
width: 100px;
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 8vh;
overflow: hidden;
border: 1px solid #000;
font-family: 'Lato', sans-serif;
font-weight: 300;
transition: 0.5s;
letter-spacing: 1px;
border-radius: 8px;
button {
width: 101%;
height: 100%;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 11px;
letter-spacing: 1px;
font-weight: bold;
@include button(#000, "https://raw.githubusercontent.com/pizza3/asset/master/natureSmaller.png",
7100%,
100%,
none,
#fff);
cursor: pointer;
-webkit-animation: ani2 0.7s steps(70) forwards;
animation: ani2 0.7s steps(70) forwards;
&:hover {
-webkit-animation: ani 0.7s steps(70) forwards;
animation: ani 0.7s steps(70) forwards;
}
}
}
5)线按钮样式动画

<button class="btn btn--stripe">青鹿云</button>
<a href="#" class="btn btn--stripe">青鹿云</a>
<button class="btn btn--stripe btn--radius">www.milubk.com</button>
<button class="btn btn--stripe btn--large">青鹿云丨milubk.com</button>
$color-gray: #666;
$color-black: #000;
$stripe-height: 7px;
$btn-color: $color-gray;
$btn-background: #fff;
$btn-color-hover: #fff;
$btn-background-hover: $color-gray;
$border-color: $color-gray;
$border-color-hover: $color-black;
@mixin reset-button {
overflow : visible;
margin : 0;
padding : 0;
border : 0;
background : transparent;
font : inherit;
line-height : normal;
cursor : pointer;
-moz-user-select : text;
&:-moz-focus-inner {
padding : 0;
border : 0;
}
}
@keyframes stripe-slide {
0% { background-position: 0% 0; }
100% { background-position: 100% 0; }
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: sans-serif;
}
.btn {
@include reset-button;
display: block;
text-decoration: none;
text-transform: uppercase;
padding: 16px 36px 22px;
background-color: $btn-background;
color: $btn-color;
border: 2px solid $border-color;
border-radius: 6px;
margin-bottom: 16px;
transition: all .5s ease;
&--stripe {
overflow: hidden;
position: relative;
&:after {
content: '';
display: block;
height: $stripe-height;
width: 100%;
background-image: repeating-linear-gradient(
45deg,
$border-color,
$border-color 1px,
transparent 2px,
transparent 5px
);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-top: 1px solid $border-color;
position: absolute;
left: 0;
bottom: 0;
background-size: $stripe-height $stripe-height;
}
&:hover {
background-color: $btn-background-hover;
color: $btn-color-hover;
border-color: $border-color-hover;
&:after {
background-image: repeating-linear-gradient(
45deg,
$btn-color-hover,
$btn-color-hover 1px,
transparent 2px,
transparent 5px
);
border-top: 1px solid $border-color-hover;
animation: stripe-slide 12s infinite linear forwards;
}
}
}
&--large {
width: 50%;
}
&--radius {
border-radius: 36px;
}
}
6)无限翻转按钮

button.tag(
data-content-default="青鹿云丨milubk.com"
data-content-spinning="青鹿云丨milubk.com" )
body {
font-family: 'Montserrat', sans-serif;
background-color: #651FFF;
height: 100vh;
display: flex;
user-select: none;
align-items: center;
cursor: pointer;
justify-content: center;
perspective: 288px; }
.tag {
position: relative;
display: block;
background-color: #FFF;
font-weight: 700;
font-size: 1rem;
border: none;
outline: none;
min-width: 150px;
text-align: center;
box-sizing: border-box;
padding: 4vh 8vw;
text-decoration: none;
color: #000;
letter-spacing: 2px;
cursor: -webkit-grab;
cursor: -moz-grab;
&:before {
content: attr( data-content-default ); }
&:active {
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
animation: spinner 200ms infinite linear;
&:before {
content: attr( data-content-spinning ); }
}
}
@keyframes spinner {
from {
box-shadow: 0 10px 20px rgba( 0,0,0, 0.2 );
transform: rotateX( 0 ) rotateY( -360deg ); }
to {
box-shadow: 0 10px 20px rgba( 0,0,0, 0.2 );
transform: rotateX( 360deg ) rotateY( -360deg ); }
}
7)滑动高光按钮

<div class="wrapper">
<a href="#" class="button">青鹿云</a>
</div>
$color: #2194E0;
@keyframes sheen {
0% {
transform: skewY(-45deg) translateX(0);
}
100% {
transform: skewY(-45deg) translateX(12.5em);
}
}
.wrapper {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.button {
padding: 0.75em 2em;
text-align: center;
text-decoration: none;
color: $color;
border: 2px solid $color;
font-size: 24px;
display: inline-block;
border-radius: 0.3em;
transition: all 0.2s ease-in-out;
position: relative;
overflow: hidden;
&:before {
content: "";
background-color: rgba(255,255,255,0.5);
height: 100%;
width: 3em;
display: block;
position: absolute;
top: 0;
left: -4.5em;
transform: skewX(-45deg) translateX(0);
transition: none;
}
&:hover {
background-color: $color;
color: #fff;
border-bottom: 4px solid darken($color, 10%);
&:before {
transform: skewX(-45deg) translateX(13.5em);
transition: all 0.5s ease-in-out;
}
}
}
8)边框填充按钮

<div class="buttons">
<button class="blob-btn">
青鹿云
<span class="blob-btn__inner">
<span class="blob-btn__blobs">
<span class="blob-btn__blob"></span>
<span class="blob-btn__blob"></span>
<span class="blob-btn__blob"></span>
<span class="blob-btn__blob"></span>
</span>
</span>
</button>
<br/>
<button class="blob-btn">
青鹿云丨milubk.com
<span class="blob-btn__inner">
<span class="blob-btn__blobs">
<span class="blob-btn__blob"></span>
<span class="blob-btn__blob"></span>
<span class="blob-btn__blob"></span>
<span class="blob-btn__blob"></span>
</span>
</span>
</button>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10"></feGaussianBlur>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -7" result="goo"></feColorMatrix>
<feBlend in2="goo" in="SourceGraphic" result="mix"></feBlend>
</filter>
</defs>
</svg>
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
$openSans: 'Open Sans', Helvetica, Arial, sans-serif;
body {
background: #333;
font-family: $openSans;
}
.buttons {
margin-top: 50px;
text-align: center;
}
$cyan: #0fe0f5;
$dark: #222;
$borderW: 6px;
.blob-btn {
$numOfBlobs: 4;
z-index: 1;
position: relative;
padding: 20px 46px;
margin-bottom: 30px;
text-align: center;
text-transform: uppercase;
color: $cyan;
font-size: 16px;
font-weight: bold;
background-color: transparent;
outline: none;
border: none;
transition: color 0.5s;
cursor: pointer;
&:before {
content: "";
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: $borderW solid $cyan;
}
&:after {
content: "";
z-index: -2;
position: absolute;
left: $borderW*1.5;
top: $borderW*1.5;
width: 100%;
height: 100%;
border: $borderW solid $dark;
transition: all 0.3s 0.2s;
}
&:hover {
color: $dark;
&:after {
transition: all 0.3s;
left: 0;
top: 0;
}
}
&__inner {
z-index: -1;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
// additional container created, because in FF blobs are breaking overflow:hidden of element with svg gooey filter
&__blobs {
position: relative;
display: block;
height: 100%;
filter: url('#goo');
}
&__blob {
position: absolute;
top: $borderW;
width: 100% / $numOfBlobs;
height: 100%;
background: $cyan;
border-radius: 100%;
transform: translate3d(0,150%,0) scale(1.7);
transition: transform 0.45s;
@supports(filter: url('#goo')) {
transform: translate3d(0,150%,0) scale(1.4);
}
@for $i from 1 through $numOfBlobs {
&:nth-child(#{$i}) {
left: ($i - 1) * (120% / $numOfBlobs);
transition-delay: ($i - 1) * 0.08s;
}
}
.blob-btn:hover & {
transform: translateZ(0) scale(1.7);
@supports(filter: url('#goo')) {
transform: translateZ(0) scale(1.4);
}
}
}
}
9)拟物点击倾斜按钮

.button
- for (var i = 1; i <= 15; i++)
span.tilt(class='tilt-'+i)
.text 青鹿云
.background
$tilts: 15;
$button: #bdefe7;
$shadow: #63bdad;
.button {
display: flex;
position: relative;
// gradient because sometimes the top peaks out when skewing
background: linear-gradient(to bottom, $button, $shadow);
min-width: 10em;
min-height: 3em;
text-align: center;
cursor: pointer;
.text {
position: absolute;
z-index: 1;
top: -1px;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.tilt {
display: inline-block;
position: relative;
z-index: 2;
flex-grow: 1;
}
.background {
position: absolute;
top: -2px;
left: -1px;
height: 100%;
width: calc(100% + 2px);
background: $button;
}
&:active {
.text {
top: 1px;
}
.background {
top: -1px;
}
}
@for $i from 1 through $tilts {
.tilt-#{$i}:active {
$skew: (-$tilts/2+$i)/$tilts*3deg;
~ .background, ~ .text {
transform: skewY($skew);
}
}
}
}
$s: 50px;
$h: sqrt($s*$s/0.5px);
$light: hsl(158, 53%, 94%);
$dark: hsl(158, 53%, 90%);
body {
background: $light;
background-image: repeating-linear-gradient(45deg, transparent, transparent $s/2, $dark $s/2, $dark $s);
background-size: $h $h;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: Lato, Helvetica, sans-serif;
}
10)抖动电波按钮

© 版权声明
本站网络名称:
青鹿云
本站永久网址:
www.milubk.com
网站侵权说明:
本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权请联系站长删除处理。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
THE END
- 最新
- 最热
只看作者