CSS3按钮是如今在网页设计中非常流行的一种元素，它能让网页更加动感、时尚，增强设计感，提高用户体验。因为其多样性，很容易满足不同的设计需求，所以被广泛使用。

　　在本文中，我们将介绍10个酷炫的CSS3按钮样式，这些按钮样式可以让你的网站更加出众。这些样式，基本上可以满足各种不同需求的设计师，只要你设定了好的颜色调和、大小等等。

　　1. 漂浮按钮

　　如果你想用一个简单但是非常有效的CSS3按钮，推荐使用漂浮按钮。这种效果的按钮非常适合用于需要注重空间管理网页的设计，同时，这种按钮的动画效果非常有趣。

　　使用CSS3漂浮按钮的方法还很简单，只需要用css命令将其悬浮在页面上即可。它的代码如下：

　　.btn {

　　 position: fixed;

　　 right: 30px;

　　 bottom: -20px;

　　 color: white;

　　 font-size: 20px;

　　 text-align: center;

　　 background-color: #0d0c0c;

　　 border-radius: 50%;

　　 padding: 20px;

　　 box-shadow: 0px 0px 50px rgba(0,0,0,0.5);

　　 transition: all 0.5s;

　　}

　　.btn:hover {

　　 bottom: 20px;

　　}

　　2. 按钮边框效果

　　这是一种非常常见的CSS3按钮设计，它能产生特别酷炫的边框效果。这种按钮样式使用起来非常简单，只需要对它的边框进行调整，再添加一个鼠标悬浮效果即可。

　　.btn-border {

　　 padding: 10px 20px;

　　 font-size: 18px;

　　 text-transform: uppercase;

　　 letter-spacing: 1px;

　　 border: 2px solid #333;

　　 transition: all 0.3s;

　　}

　　.btn-border:hover {

　　 color: #fff;

　　 background-color: #333;

　　 border-color: #fff;

　　}

　　3. 圆形按钮

　　圆形按钮也是非常常见的一种按钮样式，在不同的页面设计中它的受欢迎程度都非常高。你需要非常注重它的样式，尤其是它的大小和各种颜色的组合，才能使页面设计更加优美。

　　.btn-round {

　　 width: 50px;

　　 height: 50px;

　　 background-color: #333;

　　 color: #fff;

　　 text-align: center;

　　 border-radius: 50%;

　　 font-size: 20px;

　　 transition: all 0.3s;

　　}

　　.btn-round:hover {

　　 background-color: #fff;

　　 color: #333;

　　}

　　4. 渐变按钮

　　渐变效果的CSS3按钮是一种特别出色的按钮设计，因为它使用了渐变颜色，效果非常突出，用户也会特别留意这个按钮。你可以使用transition属性来调整这个渐变效果。

　　.btn-gradient {

　　 padding: 10px 20px;

　　 color: #fff;

　　 font-size: 18px;

　　 border-radius: 30px;

　　 border: none;

　　 background-image: linear-gradient(to bottom, #ff5f6d, #ffc371);

　　 transition: all 0.3s;

　　}

　　.btn-gradient:hover {

　　 color: #fff;

　　 background-image: linear-gradient(to bottom, #ffc371, #ff5f6d);

　　}

　　5. 3D按钮

　　3D按钮是一种非常吸引人的设计样式，通过对按钮添加立体感和投影效果来实现，让按钮更具生动感，更加立体而鲜活。

　　.btn-3d {

　　 position: relative;

　　 display: inline-block;

　　 padding: 10px 15px;

　　 color: #fff;

　　 text-shadow: 0px 1px 0px rgba(0,0,0,0.9);

　　 text-decoration: none;

　　 background-color: #555;

　　 border: none;

　　 border-radius: 5px;

　　 box-shadow: inset 0px 2px 0px rgba(255,255,255,0.3),

　　 0px 2px 10px rgba(0,0,0,0.1),

　　 0px 0px 15px rgba(0,0,0,0.15);

　　 transition: all 0.3s ease-out;

　　 font-size: 18px;

　　}

　　.btn-3d:hover {

　　 transform: translateY(-4px);

　　 box-shadow: inset 0px 2px 0px rgba(255,255,255,0.4),

　　 0px 4px 20px rgba(0,0,0,0.2),

　　 0px 0px 30px rgba(0,0,0,0.25);

　　}

　　6. 阴影按钮

　　阴影按钮在很多网站设计中都有非常好的实践应用。阴影按钮的设计也不难，只需要添加一个box-shadow属性即可，按钮看起来更有层次感和立体感，让图像更加动感。

　　.btn-shadow {

　　 padding: 10px 20px;

　　 background-color: #333;

　　 color: #fff;

　　 text-transform: uppercase;

　　 letter-spacing: 2px;

　　 border: none;

　　 border-radius: 5px;

　　 box-shadow: 0px 10px 20px rgba(0,0,0,0.5);

　　 transition: all 0.3s;

　　}

　　.btn-shadow:hover {

　　 transform: translateY(-3px);

　　 box-shadow: 0px 15px 30px rgba(0,0,0,0.6);

　　}

　　7. 图标按钮

　　图标按钮非常常见，但是如果你想要它看起来更特别，你可以考虑一下用一些css3效果。例如，你可以在按钮上添加一些旋转动画，使它看起来非常酷炫。这样的按钮样式在移动端的使用体验会特别棒。

　　.btn-icon {

　　 position: relative;

　　 display: inline-block;

　　 padding: 10px 50px;

　　 background-color: #333;

　　 color: #fff;

　　 font-size: 20px;

　　 border-radius: 30px;

　　 border: none;

　　 transition: all 0.3s ease-out;

　　}

　　.btn-icon:hover {

　　 background-color: #f42a49;

　　 transform: scale(1.1);

　　}

　　.btn-icon i {

　　 position: absolute;

　　 top: 15px;

　　 left: 20px;

　　 font-size: 30px;

　　 transform: rotate(0deg);

　　 transition: all 0.3s ease-out;

　　}

　　.btn-icon:hover i {

　　 transform: rotate(360deg);

　　}

　　8. 翻滚按钮

　　翻滚按钮是一种特别有意思的按钮样式，因为它可以让用户在一个导航元素中看到更多内容。这种按钮样式可以使用css3中的transition属性来实现。尤其是在博客介绍类的网站会特别流行。

　　.btn-flip {

　　 position: relative;

　　 display: block;

　　 width: 150px;

　　 height: 90px;

　　 margin: 0 auto;

　　 background-color: #333;

　　 color: #fff;

　　 font-size: 20px;

　　 text-transform: uppercase;

　　 letter-spacing: 2px;

　　 border-radius: 5px;

　　 perspective: 800px;

　　}

　　.btn-flip::before,

　　.btn-flip::after {

　　 position: absolute;

　　 top: 0;

　　 left: 0;

　　 z-index: -1;

　　 width: 150px;

　　 height: 90px;

　　 background-color: #f44242;

　　 content: "";

　　 transform: rotateY(0deg);

　　 backface-visibility: hidden;

　　 transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

　　}

　　.btn-flip::before {

　　 transform-origin: 0% 50%;

　　 transform: rotateY(0deg);

　　}

　　.btn-flip::after {

　　 transform-origin: 100% 50%;

　　 transform: rotateY(90deg);

　　}

　　.btn-flip:hover::before,

　　.btn-flip:hover::after {

　　 transform: rotateY(-90deg);

　　}

　　9. 剪裁按钮

　　剪裁按钮同样非常流行，不仅仅在博客介绍类的网站中很多地方，其他不同场景设计也可以看到。在主要区域设置一个颜色和一个截角，然后为按钮添加悬浮效果，让按钮更具立体感。

　　.btn-clip {

　　 display: inline-block;

　　 position: relative;

　　 padding: 10px 30px 10px 50px;

　　 margin: 10px;

　　 font-size: 22px;

　　 color: #fff;

　　 text-transform: uppercase;

　　 letter-spacing: 2px;

　　 font-weight: 700;

　　 background: #f42a49;

　　 border-radius: 5px;

　　 transition: all 0.3s ease-in-out;

　　}

　　.btn-clip::before {

　　 position: absolute;

　　 top: 0;

　　 left: 0;

　　 z-index: -1;

　　 content: "";

　　 width: 100%;

　　 height: 100%;

　　 background: #333;

　　 border-radius: 5px;

　　 transition: all 0.3s ease-out;

　　}

　　.btn-clip:hover {

　　 background: #333;

　　}

　　.btn-clip:hover::before {

　　 border-top-left-radius: 50%;

　　}

　　10. 螺旋按钮

　　螺旋按钮是一种特别有趣的CSS3按钮设计，通过对按钮添加有趣的动画，使按钮看起来更加生动有趣。这种按钮的设计可以让页面非常有活力，也会让用户感觉到当下网站非常时尚和前沿。

　　.btn-spiral {

　　 position: relative;

　　 padding: 15px 50px;

　　 background: #333;

　　 color: #fff;

　　 font-size: 24px;

　　 letter-spacing: 2px;

　　 text-transform: uppercase;

　　 text-align: center;

　　 border-radius: 50px;

　　 box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 40px -10px inset;

　　}

　　.btn-spiral:hover {

　　 transform: rotate(360deg);

　　}

　　这10个CSS3按钮样式都非常好看、实用，能够极大程度地提高页面的品质。无论是在博客、商务网站，还是娱乐门户等其他场景，这些CSS3按钮都能够很好的吸引用户的注意。

　　在使用这些CSS3按钮的时候，要注意各种颜色的搭配，调节大小、形态等。只有这样才能让你的设计效果更好。此外，建议加入一些创意元素，比如图案、字母、文本等等，以提升页面的视觉感。