很炫的带图标和背景动画的按钮

CSS Background Buttons with mixin 使用SASS MIXIN实现的按钮效果

css3, button

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

// Fancy background buttons with mixin

// Fonts

@import url(https://fonts.googleapis.com/css?family=Oswald:400,700);
@import url(https://fonts.googleapis.com/css?family=Nunito:400,700);

// Base button styles

:root{
  background: -webkit-linear-gradient(top, #222838 0%, #131621 100%);
  background: -moz-linear-gradient(top, #222838 0%, #131621 100%);
  height:100vh
}

.container{
  width:334px;
  margin:0 auto;
  position:absolute;
  top:50%;
  left:0;
  text-align:center;
  right:0;
  transform:translateY(-50%);
}

a{
  color:white;
  text-decoration:none;
}

h1,h2{
  color:white; 
  font-family: 'Oswald', sans-serif;
  font-weight:normal;
}
h2{
  font-size:14px;
  margin-bottom:30px;
  color: #24E2B8;
}
%button{
  border:none;  
  border-radius:4px;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.48);
  overflow:hidden;
  padding:20px 50px 20px 70px;
  margin-bottom:20px;
  font-size:20px;
  position:relative;
  color:white;
  outline:none;
  cursor:pointer;
  width:100%;
  transition:background-position .7s,box-shadow .4s;
  background-size:110%;
  font-family: 'Oswald', sans-serif;
  &:hover{
    background-position:0% 30%;
    &:after{
      right:-40px;
      transition:right .4s,transform 30s .2s linear;
    }
    &:before{

}
  }
  &:before,&:after{
    font-family: FontAwesome;
    display: block;
    position: absolute;
  }
  &:before{
    transition:all 1s;
    font-size: 30px;
    left: 25px;
    top: 19px;
  }
  &:after{
    transition:right .4s, transform .2s;
    font-size: 100px;
    opacity: .3;
    right: -120px;
    top: -17px;
  }
}

// Mixin

@mixin make-button($background,$gradientTop,$gradientBottom,$boldColor,$icon,$afterTransform,$beforeTransform) {
  @extend %button !optional;
  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.16) inset, 0px 0px 10px 0px $gradientTop;
  background-image:linear-gradient(to bottom,$gradientTop,  $gradientBottom),url($background);
  &:hover{
    box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.16) inset, 0px 0px 30px 0px $gradientTop;
    &:after{
      transform:$afterTransform;
    }
    &:before{
      transform:$beforeTransform;
    }
  }
  &:after,&:before{
    content: $icon;
  }
  b{
    color: $boldColor;
    font-weight:700
  }
}

// Buttons

.one{
  @include make-button('http://gearnuke.com/wp-content/uploads/2015/11/1280x720-cuU.jpg',#782CDA,rgba(126, 94, 162, 0.51),#DDA6FF,'\f11b',scale(1),scale(1.2))
    }

.two{
  @include make-button('http://www.eatweartravel.com/wp-content/uploads/2015/04/i-love-shopping_1920x1200_83206.jpg',#E48A3C,rgba(222, 135, 61, 0.24),#FFD9B4,'\f07a',scale(1),scale(1.2))
    }

.three{
  @include make-button('http://blog.teamthinklabs.com/wp-content/uploads/2012/09/codepen-460x253.png',#36C176 ,rgba(86, 202, 139, 0.18),#63FFAC,'\f1cb',scale(1),scale(1.2))
    }

.four{
  @include make-button('http://cdn2.itpro.co.uk/sites/itpro/files/server_room.jpg',#33E7EA,rgba(161, 245, 245, 0.24),#1CF4FF,'\f1cd',rotate(3000deg),rotate(360deg))
    }

.five{
  @include make-button('http://nightlifeassociates.com/wp-content/uploads/2014/03/hakkasan-nightclub_tiesto-smalls.jpg',#DE3964 ,rgba(154, 40, 87, 0.24),#F764FF,'\f000',scale(1),scale(1.2))
    }

HTML

CSS Background Buttons with mixin 使用SASS MIXIN实现的按钮效果

css3, button

编辑器支持Emmet

快捷键

CSS Background Buttons with mixin 使用SASS MIXIN实现的按钮效果

css3, button

HTML5 CSS3很棒的一款带渐变背景色和涟漪动画的原质化风格按钮

CSS3 带波浪动画背景的按钮

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：