总共提供了5种款式css3按钮样式，有闪光和变化的框架。

只能说风格确实很酷，大家自己试试疗效吧。

检查效果

如何使用：

首先引用css文件htbtn.css：

然后在内层添加类htcontainer，为按钮添加类htbtn，添加类htbtn-1或htbtn-2等css3按钮样式，一共5种，

如果是htbtn-1，则添加额外的svg元素

html代码：

        
        
            
            光标悬浮
        

        何问起

完整代码如下：

    
    
    
	
    
    
        .hovertreeinfo{text-align:center;}
    


    
使用htbtn.css制作按钮动画

    请把光标悬浮到各个按钮上面。
    

    
        
        
            
            光标悬浮
        

        何问起

        htbtn-3 凹凸

        htbtn-4 闪电

        何问起边框

        

Demo 2疗效展示：

显示结果

演示2代码如下：

    
    
    
    
    
    

    
    
    



    


        

            
Button Hover Effects


            
                
                Hover
            
            

            Hover
            

            Hover
            

            Hover
            

            Hover
            

        


    

最后放上htbtn.css文件的代码：

/*
htbtn.css
    按钮动画样式

by 何问起
    hovertree.com

    ht 表示 HoverTree
*/

.htcontainer {
  padding: 1em;
  background-color:#E1332D;
  margin:0px;
  text-align:center;
}
.htcontainer a{color:#ffffff}
.htbtn {
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 45px;
  margin: 0 auto 0em;
  max-width: 160px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
  width: 100%;
  text-align:center;
  font-family:Arial, 'Microsoft YaHei',Helvetica, sans-serif
}
@media (min-width: 400px) {
  .htbtn {
    display: inline-block;
    margin-right: 2.5em;
  }
  .htbtn:nth-of-type(even) {
    margin-right: 0;
  }
}
@media (min-width: 600px) {
  .htbtn:nth-of-type(even) {
    margin-right: 2.5em;
  }
  .htbtn:nth-of-type(5) {
    margin-right: 0;
  }
}
.htbtn:hover {
  text-decoration: none;
}

.htbtn-1 {
  background: #e02c26;
  font-weight: 100;
}
.htbtn-1 svg {
  height: 45px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.htbtn-1 rect {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: 422, 0;
}

.htbtn-1:hover {
  background: rgba(225, 51, 45, 0);
  font-weight: 900;
  letter-spacing: 1px;
}
.htbtn-1:hover rect {
  stroke-width: 5;
  stroke-dasharray: 15, 310;
  stroke-dashoffset: 48;
  -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
          transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}

.htbtn-2 {
  letter-spacing: 0;
}

.htbtn-2:hover,
.htbtn-2:active {
  letter-spacing: 5px;
}

.htbtn-2:after,
.htbtn-2:before {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border: 1px solid rgba(255, 255, 255, 0);
  bottom: 0px;
  content: " ";
  display: block;
  margin: 0 auto;
  position: relative;
  -webkit-transition: all 280ms ease-in-out;
          transition: all 280ms ease-in-out;
  width: 0;
}

.htbtn-2:hover:after,
.htbtn-2:hover:before {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-color: #fff;
  -webkit-transition: width 350ms ease-in-out;
          transition: width 350ms ease-in-out;
  width: 70%;
}

.htbtn-2:hover:before {
  bottom: auto;
  top: 0;
  width: 70%;
}

.htbtn-3 {
  background: #e3403a;
  border: 1px solid #da251f;
  box-shadow: 0px 2px 0 #d6251f, 2px 4px 6px #e02a24;
  font-weight: 900;
  letter-spacing: 1px;
  -webkit-transition: all 150ms linear;
          transition: all 150ms linear;

}

.htbtn-3:hover {
  background: #e02c26;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
  color: #ec817d;
  text-decoration: none;
  text-shadow: -1px -1px 0 #c2211c;
  -webkit-transition: all 250ms linear;
          transition: all 250ms linear;
}

.htbtn-4 {
  border: 1px solid;
  overflow: hidden;
  position: relative;
}
.htbtn-4 span {
  z-index: 20;
}
.htbtn-4:after {
  background: #ffffff;
  content: " ";
  height: 155px;
  left: -75px;
  opacity: 0.2;
  position: absolute;
  top: -50px;
  -webkit-transform: rotate(35deg);
      -ms-transform: rotate(35deg);
          transform: rotate(35deg);
  -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
          transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: 10;
}

.htbtn-4:hover:after {
  left: 120%;
  -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
          transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

.htbtn-5 {
  border: 0 solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  outline: 1px solid;
  outline-color: rgba(255, 255, 255, 0.5);
  outline-offset: 0px;
  text-shadow: none;
  -webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
          transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}

.htbtn-5:hover {
  border: 1px solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
  text-shadow: 1px 1px 2px #427388;
}