18910140161

CSS和CSS3按钮选择器对比

顺晟科技

2021-07-31 07:32:30

252

CSS3按钮选择器,通过CSS3新特性把普通的html链接设计成视觉上平滑的按钮m包括梯度背景、圆角、下拉阴影,以及转换等效果。支持CSS 3动画,可以把按钮逐渐地从默认状态变为悬停状态,你可以在不使用如上图那样的图片的情况下得到一个漂亮的按钮。
    

                                          上图


 

CSS3 Magic

CSS Code:

 button {
     -moz-border-radius: 25px;
     -moz-box-shadow: #6E7849 0px 0px 10px;
     -moz-transition: all 0.5s ease;
     -ms-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
     -webkit-border-radius: 25px;
     -webkit-box-shadow: #6E7849 0 0 10px;
     -webkit-transition: all 0.5s ease;
     background-color: #6E7849;
     background-image: -moz-linear-gradient(90deg, #B9C788, #6E7849);
     background-image: -ms-linear-gradient(90deg, #B9C788, #6E7849);
     background-image: -o-linear-gradient(90deg, #B9C788, #6E7849);
     background-image: -webkit-linear-gradient(90deg, #B9C788, #6E7849);
     background-image: linear-gradient(90deg, #B9C788, #6E7849);
     border-radius: 25px;
     border: 2px solid #4a5032;
     box-shadow: #6E7849 0px 0px 10px;
     color: #ffffff;
     display: inline-block;
     font-size: 4em;
     margin: auto;
     padding: 15px;
     text-decoration: none;
     text-shadow: #000000 5px 5px 15px;
     transition: all 0.5s ease;
   }

  .button:hover {
     padding: 15px;
   }






    本文由炫意站长翻译,请尊重版权,转载请注明翻译者和原出处

    原文CSS Drive CSS3 Button Generator

我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航