网站前端制作之css按钮动画效果

　　了解更多的按钮是很多网站页面的组成部分，为了使设计出来的页面更加美观，按钮的外观设计也重要，按钮需要实现的鼠标效应效果主要有默认和悬停状态，添加鼠标悬停，可以丰富优化按钮的设计，也可以吸引用户注意力，提升用户体验。鼠标的默认效果大多都是按照设计图上的效果实现，鼠标的悬停时按钮从默认效果到悬停状态的效果的转换效果，可以做到的效果有很多种，例如下面的三种效果：

　　Html：

　　了解更多

　　效果一是当鼠标悬停的时候，背景色从中间往左右两边扩散。

　　了解更多按钮的样式效果如下图：Css：

　　.combtn{

　　text-align：center;

　　}

　　.combtna{

　　position：relative;

　　z-index：1;

　　display：inline-block;

　　min-width：150px;

　　height：50px;

　　border：#666666solid1px;

　　color：#323333;

　　font-size：18px;

　　-webkit-transition：border-color0.4s，color0.4s;

　　transition：border-color0.4s，color0.4s;

　　}

　　.combtna：hover{

　　color：#FFFFFF;

　　border：#85b79asolid1px;

　　}

　　.combtna：：before{

　　content：'';

　　position：absolute;

　　top：0;

　　width：100%;

　　height：100%;

　　background：#85b79a;

　　z-index：-1;

　　opacity：0;

　　-webkit-transform：scale3d(0.7，1，1);

　　transform：scale3d(0.7，1，1);

　　-webkit-transition：-webkit-transform0.4s，opacity0.4s;

　　transition：transform0.4s，opacity0.4s;

　　-webkit-transition-timing-function：cubic-bezier(0.2，1，0.3，1);

　　transition-timing-function：cubic-bezier(0.2，1，0.3，1);

　　}

　　.combtna：hover：：before{

　　opacity：1;

　　-webkit-transform：translate3d(0，0，0);

　　transform：translate3d(0，0，0);

　　}

　　效果二是当鼠标悬停的时候，白色线框出现在按钮里面的四周。

　　了解更多按钮的样式效果如下图：

　　Css：

　　.combtn{

　　text-align：center;

　　}

　　.combtna{

　　min-width：150px;

　　height：50px;

　　color：#FFFFFF;

　　-webkit-transform：translateZ(0);

　　transform：translateZ(0);

　　box-shadow：001pxrgb(000/0%);

　　-webkit-bacace-visibility：hidden;

　　bacace-visibility：hidden;

　　-moz-osx-font-smoothing：grayscale;

　　position：relative;

　　background：#85b79a;

　　}

　　.combtna：before{

　　content：'';

　　position：absolute;

　　border：whitesolid4px;

　　top：4px;

　　right：4px;

　　bottom：4px;

　　opacity：0;

　　-webkit-transition-duration：0.3s;

　　transition-duration：0.3s;

　　-webkit-transition-property：opacity;

　　transition-property：opacity;

　　}

　　.combtna：hover：before，.combtna：focus：before，.combtna：active：before{

　　opacity：1;

　　}

　　效果三是当鼠标悬停的时候，白色线框出现在按钮外面的四周。跟上面效果二的效果有些相似，效果二是白色线框在按钮里面，效果三是绿色线框在按钮在外面四周。

　　了解更多按钮的样式效果如下图：

　　Css：

　　.combtn{

　　text-align：center;

　　}

　　.combtna{

　　min-width：150px;

　　height：50px;

　　color：#FFFFFF;

　　-webkit-transform：translateZ(0);

　　transform：translateZ(0);

　　box-shadow：001pxrgb(000/0%);

　　-webkit-bacace-visibility：hidden;

　　bacace-visibility：hidden;

　　-moz-osx-font-smoothing：grayscale;

　　position：relative;

　　background：#85b79a;

　　-webkit-transform：translateZ(0);

　　transform：translateZ(0);

　　box-shadow：001pxrgb(000/0%);

　　-webkit-bacace-visibility：hidden;

　　bacace-visibility：hidden;

　　-moz-osx-font-smoothing：grayscale;

　　}

　　.combtna：before{

　　content：'';

　　position：absolute;

　　border：#85b79asolid4px;

　　top：0;

　　right：0;

　　bottom：0;

　　-webkit-transition-duration：0.3s;

　　transition-duration：0.3s;

　　-webkit-transition-property：top，right，bottom，left;

　　transition-property：top，right，bottom，left;

　　}

　　.combtna：hover：before，.combtna：focus：before，.combtna：active：before{

　　top：-8px;

　　right：-8px;

　　bottom：-8px;

　　}