1)空间感很强的按钮特效

2)点击涟漪效果

此处内容已隐藏，请评论后刷新页面查看.

3)泡沫按钮效果

4)遮罩效果按钮

html

css

  <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)线按钮样式动画

html

css

<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)无限翻转按钮

html

css

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)滑动高光按钮

html

css

<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)边框填充按钮

html

css

<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)拟物点击倾斜按钮

html

css

.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 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END