按钮hover（二）

重要

• 需要建立fonts文件夹，里面放入效果所需字体，字体名如下：
• FontAwesome.otf 下载地址
• fontawesome-webfont.eot 下载地址
• fontawesome-webfont.svg 下载地址
• fontawesome-webfont.ttf 下载地址
• fontawesome-webfont.woff 下载地址

HTML

//最好用npm引入
<link rel="stylesheet" type="text/css" href="css/normalize.css" /> 
<link href="css/font-awesome.min.css" rel="stylesheet">

<div class="container">  
  <h1>CSS3 Button <span>Hover</span> Effects</h1>  
  <div class="button-effect">  
   <h2>Effect #1</h2>  
   <a class="effect effect-1" href="#" title="Learn More">Learn More</a>  
   <a class="effect effect-1" href="#" title="Learn More">Learn More</a>  
   <a class="effect effect-1" href="#" title="Learn More">Learn More</a>  
   <a class="effect effect-1" href="#" title="Learn More">Learn More</a>  
   <a class="effect effect-1" href="#" title="Learn More">Learn More</a>  
  </div>  <div class="button-effect">  
   <h2>Effect #2</h2>  
   <a class="effect effect-2" href="#" title="Learn More">Learn More</a>  
   <a class="effect effect-2" href="#" title="Learn More">Learn More</a>  
   <a class="effect effect-2" href="#" title="Learn More">Learn More</a>  
   <a class="effect effect-2" href="#" title="Learn More">Learn More</a>  
   <a class="effect effect-2" href="#" title="Learn More">Learn More</a>  
  </div>  <div class="button-effect">  
   <h2>Effect #3</h2>  
   <a class="effect effect-3" href="#" title="Learn More">Learn More</a>  
   <a class="effect effect-3" href="#" title="Learn More">Learn More</a>  
   <a class="effect effect-3" href="#" title="Learn More">Learn More</a>  
   <a class="effect effect-3" href="#" title="Learn More">Learn More</a>  
   <a class="effect effect-3" href="#" title="Learn More">Learn More</a>  
  </div>  <div class="button-effect">  
   <h2>Effect #4</h2>  
   <a class="effect effect-4" href="#" title="Learn More">Learn More</a>  
   <a class="effect effect-4" href="#" title="Learn More">Learn More</a>  
   <a class="effect effect-4" href="#" title="Learn More">Learn More</a>  
   <a class="effect effect-4" href="#" title="Learn More">Learn More</a>  
   <a class="effect effect-4" href="#" title="Learn More">Learn More</a>  
  </div>  <div class="button-effect">  
   <h2>Effect #5</h2>  
   <a class="effect effect-5" href="#" title="Learn More">Learn More</a>  
   <a class="effect effect-5" href="#" title="Learn More">Learn More</a>  
   <a class="effect effect-5" href="#" title="Learn More">Learn More</a>  
   <a class="effect effect-5" href="#" title="Learn More">Learn More</a>  
   <a class="effect effect-5" href="#" title="Learn More">Learn More</a>  
  </div>  </div>

CSS

body {  
  background-color: #F1E9DA;  
}  
body .container {  
  width: 850px;  
  margin: 70px auto 0px auto;  
  text-align: center;  
}  
body .container h1 {  
  font-family: 'Droid Serif', serif;  
  font-weight: 400;  
  font-style: normal;  
  font-size: 30px;  
  margin-bottom: 30px;  
}  
body .container h1 span {  
  font-weight: 700;  
  font-style: italic;  
  color: #D90368;  
  border-bottom: 2px dashed currentColor;  
}  
body .container .button-effect {  
  padding: 30px 0px;  
}  
body .container .button-effect h2 {  
  font-family: 'Droid Serif', serif;  
  font-size: 20px;  
  margin-bottom: 40px;  
}  
body .container .button-effect a {  
  margin-right: 17px;  
}  
body .container .button-effect a:nth-child(2) {  
  background-color: #541388;  
}  
body .container .button-effect a:nth-child(3) {  
  background-color: #D90368;  
}  
body .container .button-effect a:nth-child(4) {  
  background-color: #104547;  
}  
body .container .button-effect a:nth-child(5) {  
  background-color: #4F000B;  
}  
body .container .button-effect a:nth-child(6) {  
  background-color: #F28123;  
}  
body .container .button-effect a:last-child {  
  margin-right: 0px;  
}  
  
.effect {  
  display: inline-block;  
  position: relative;  
  text-decoration: none;  
  color: #fff;  
  text-transform: capitalize;  
  font-family: 'Roboto', sans-serif;  
  font-size: 18px;  
  padding: 20px 0px;  
  width: 150px;  
  border-radius: 6px;  
  overflow: hidden;  
}  
  
.effect.effect-1 {  
  -webkit-transition: all 0.2s linear 0s;  
  transition: all 0.2s linear 0s;  
}  
.effect.effect-1:before {  
  content: "\f178";  
  font-family: FontAwesome;  
  font-size: 15px;  
  position: absolute;  
  display: -webkit-box;  
  display: -ms-flexbox;  
  display: flex;  
  -webkit-box-align: center;  
      -ms-flex-align: center;  
          align-items: center;  
  -webkit-box-pack: center;  
      -ms-flex-pack: center;  
          justify-content: center;  
  right: 0;  
  top: 0;  
  opacity: 0;  
  height: 100%;  
  width: 40px;  
  -webkit-transition: all 0.2s linear 0s;  
  transition: all 0.2s linear 0s;  
}  
.effect.effect-1:hover {  
  text-indent: -20px;  
}  
.effect.effect-1:hover:before {  
  opacity: 1;  
  text-indent: 0px;  
}  
  
.effect.effect-2 {  
  -webkit-transition: all 0.2s linear 0s;  
  transition: all 0.2s linear 0s;  
}  
.effect.effect-2:before {  
  content: "\f0a4";  
  font-family: FontAwesome;  
  font-size: 15px;  
  display: -webkit-box;  
  display: -ms-flexbox;  
  display: flex;  
  -webkit-box-align: center;  
      -ms-flex-align: center;  
          align-items: center;  
  -webkit-box-pack: center;  
      -ms-flex-pack: center;  
          justify-content: center;  
  position: absolute;  
  top: 0;  
  right: -30px;  
  width: 30px;  
  height: 100%;  
  background-color: rgba(255, 255, 255, 0.3);  
  border-radius: 0px 6px 6px 0px;  
  -webkit-transition: all 0.2s linear 0s;  
  transition: all 0.2s linear 0s;  
  text-align: center;  
}  
.effect.effect-2:hover {  
  text-indent: -30px;  
}  
.effect.effect-2:hover:before {  
  right: 0;  
  text-indent: 0px;  
}  
  
.effect.effect-3 {  
  -webkit-transition: all 0.2s linear 0s;  
  transition: all 0.2s linear 0s;  
}  
.effect.effect-3:before {  
  content: "\f178";  
  font-family: FontAwesome;  
  position: absolute;  
  display: -webkit-box;  
  display: -ms-flexbox;  
  display: flex;  
  -webkit-box-align: center;  
      -ms-flex-align: center;  
          align-items: center;  
  -webkit-box-pack: center;  
      -ms-flex-pack: center;  
          justify-content: center;  
  position: absolute;  
  top: 100%;  
  left: 0px;  
  width: 100%;  
  height: 100%;  
  text-align: center;  
  font-size: 30px;  
  -webkit-transition: all 0.2s linear 0s;  
  transition: all 0.2s linear 0s;  
}  
.effect.effect-3:hover {  
  text-indent: -9999px;  
}  
.effect.effect-3:hover:before {  
  top: 0;  
  text-indent: 0;  
}  
  
.effect.effect-4 {  
  -webkit-transition: all 0.2s linear 0s;  
  transition: all 0.2s linear 0s;  
}  
.effect.effect-4:before {  
  content: "\f178";  
  font-family: FontAwesome;  
  display: -webkit-box;  
  display: -ms-flexbox;  
  display: flex;  
  -webkit-box-align: center;  
      -ms-flex-align: center;  
          align-items: center;  
  -webkit-box-pack: center;  
      -ms-flex-pack: center;  
          justify-content: center;  
  position: absolute;  
  top: 0;  
  left: 0px;  
  width: 100%;  
  height: 100%;  
  text-align: center;  
  font-size: 30px;  
  -webkit-transform: scale(0, 1);  
          transform: scale(0, 1);  
  -webkit-transition: all 0.2s linear 0s;  
  transition: all 0.2s linear 0s;  
}  
.effect.effect-4:hover {  
  text-indent: -9999px;  
}  
.effect.effect-4:hover:before {  
  -webkit-transform: scale(1, 1);  
          transform: scale(1, 1);  
  text-indent: 0;  
}  
  
.effect.effect-5 {  
  -webkit-transition: all 0.2s linear 0s;  
  transition: all 0.2s linear 0s;  
}  
.effect.effect-5:before {  
  content: "\f054";  
  font-family: FontAwesome;  
  display: -webkit-box;  
  display: -ms-flexbox;  
  display: flex;  
  -webkit-box-align: center;  
      -ms-flex-align: center;  
          align-items: center;  
  -webkit-box-pack: center;  
      -ms-flex-pack: center;  
          justify-content: center;  
  position: absolute;  
  top: 0;  
  left: 0px;  
  height: 100%;  
  width: 30px;  
  background-color: rgba(255, 255, 255, 0.3);  
  border-radius: 0 50% 50% 0;  
  -webkit-transform: scale(0, 1);  
          transform: scale(0, 1);  
  -webkit-transform-origin: left center;  
          transform-origin: left center;  
  -webkit-transition: all 0.2s linear 0s;  
  transition: all 0.2s linear 0s;  
}  
.effect.effect-5:hover {  
  text-indent: 30px;  
}  
.effect.effect-5:hover:before {  
  -webkit-transform: scale(1, 1);  
          transform: scale(1, 1);  
  text-indent: 0;  
}