五款CSS3精美按钮效果代码(带阴影效果)

2013-08-18 10:31:45 -0400

此代码仅供参考

代码说明

CSS3按钮特效，一些超精美的CSS3按钮特效，带阴影，颜色各不相同，我觉得值得收藏。

html代码一

.btn01{ 
color: yellow;
border-color: #e6addf; 
box-shadow:inset 0 1px 0 #ffdcfb,0 1px 0 rgba(0,0,0,.2);
background:-webkit-linear-gradient(top,#ffd0f9,#ffc2f7); 
background:-moz-linear-gradient(top,#ffd0f9,#ffc2f7); 
background:-o-linear-gradient(top,#ffd0f9,#ffc2f7); 
background:-ms-linear-gradient(top,#ffd0f9,#ffc2f7); 
background:linear-gradient(top,#ffd0f9,#ffc2f7); 
}
.btn01:hover{
background:-webkit-linear-gradient(top,#ffdefb,#fdc7f6); 
background:-moz-linear-gradient(top,#ffdefb,#fdc7f6); 
background:-o-linear-gradient(top,#ffdefb,#ffc2f7); 
background:-ms-linear-gradient(top,#ffdefb,#ffc2f7); 
background:linear-gradient(top,#ffdefb,#ffc2f7); 
}
.btn01:active{
top:4px;
box-shadow:inset 0 1px 3px #be27aa;
background:-webkit-linear-gradient(top,#f3b0ea,#f3b0ea); 
background:-moz-linear-gradient(top,#f3b0ea,#f3b0ea); 
background:-o-linear-gradient(top,#f3b0ea,#f3b0ea); 
background:-ms-linear-gradient(top,#f3b0ea,#f3b0ea); 
background:linear-gradient(top,#f3b0ea,#f3b0ea); 
}
</style>
 <button type="button" class="btn01" onclick="window.open('http://35230.wodemo.com')">Click Me</button>

代码演示

html代码二

.btn02{ 
color: #7f7f7f;
border-color: #c8c8c8;  
box-shadow:inset 0 1px 0 #e0e0e0,0 1px 0 rgba(0,0,0,.2);
background:-webkit-linear-gradient(top,#d7d7d7,#b7b7b7); 
background:-moz-linear-gradient(top,#d7d7d7,#b7b7b7); 
background:-o-linear-gradient(top,#d7d7d7,#b7b7b7); 
background:-ms-linear-gradient(top,#d7d7d7,#b7b7b7); 
background:linear-gradient(top,#d7d7d7,#b7b7b7); 
}
.btn02:hover{
background:-webkit-linear-gradient(top,#e3e3e3,#c2c0c0); 
background:-moz-linear-gradient(top,#e3e3e3,#c2c0c0); 
background:-o-linear-gradient(top,#e3e3e3,#c2c0c0); 
background:-ms-linear-gradient(top,#e3e3e3,#c2c0c0); 
background:linear-gradient(top,#e3e3e3,#c2c0c0); 
}
.btn02:active{
top:4px;
box-shadow:inset 0 1px 3px #555;
background:-webkit-linear-gradient(top,#a2a2a2,#a2a2a2); 
background:-moz-linear-gradient(top,#a2a2a2,#a2a2a2); 
background:-ms-linear-gradient(top,#a2a2a2,#a2a2a2); 
background:-o-linear-gradient(top,#a2a2a2,#a2a2a2); 
background:linear-gradient(top,#a2a2a2,#a2a2a2); 
}
 </style>
 <button type="button" class="btn02" onclick="window.open('http://35230.wodemo.com')">Click Me</button>

代码演示

html代码三

.btn03{ 
color: #678333;
border-color: #a7c570;  
box-shadow:inset 0 1px 0 #d5e89f,0 1px 0 rgba(0,0,0,.2);
background:-webkit-linear-gradient(top,#cae285,#9cc15c);
background:-moz-linear-gradient(top,#cae285,#9cc15c);
background:-ms-linear-gradient(top,#cae285,#9cc15c); 
background:-o-linear-gradient(top,#cae285,#9cc15c); 
background:linear-gradient(top,#cae285,#9cc15c); 
}
.btn03:hover{
background:-webkit-linear-gradient(top,#d8ed9b,#acce70); 
background:-moz-linear-gradient(top,#d8ed9b,#acce70); 
background:-o-linear-gradient(top,#d8ed9b,#acce70); 
background:-ms-linear-gradient(top,#d8ed9b,#acce70); 
background:linear-gradient(top,#d8ed9b,#acce70); 
}
.btn03:active{
top:4px;
box-shadow:inset 0 1px 3px #5a7d1e;
background:-webkit-linear-gradient(top,#84ad3e,#84ad3e); 
background:-moz-linear-gradient(top,#84ad3e,#84ad3e); 
background:-ms-linear-gradient(top,#84ad3e,#84ad3e); 
background:-o-linear-gradient(top,#84ad3e,#84ad3e); 
background:linear-gradient(top,#84ad3e,#84ad3e); 
}

</style>
 <button type="button" class="btn03" onclick="window.open('http://35230.wodemo.com')">Click Me</button>

代码演示

html代码四

.btn04{ 
color: #368eb0; 
border-color: #88cde7; 
box-shadow:inset 0 1px 0 #bce9f9,0 1px 0 rgba(0,0,0,.2);
background:-webkit-linear-gradient(top,#abe4f8,#70c6e7);
background:-moz-linear-gradient(top,#abe4f8,#70c6e7);
background:-ms-linear-gradient(top,#abe4f8,#70c6e7); 
background:-o-linear-gradient(top,#abe4f8,#70c6e7); 
background:linear-gradient(top,#abe4f8,#70c6e7); 
}
.btn04:hover{
background:-webkit-linear-gradient(top,#c2ecfb,#8cd6f2); 
background:-moz-linear-gradient(top,#c2ecfb,#8cd6f2); 
background:-o-linear-gradient(top,#c2ecfb,#8cd6f2); 
background:-ms-linear-gradient(top,#c2ecfb,#8cd6f2); 
background:linear-gradient(top,#c2ecfb,#8cd6f2); 
}
.btn04:active{
top:4px;
box-shadow:inset 0 1px 3px #257797;
background:-webkit-linear-gradient(top,#5eacc9,#5eacc9); 
background:-moz-linear-gradient(top,#5eacc9,#5eacc9); 
background:-ms-linear-gradient(top,#5eacc9,#5eacc9); 
background:-o-linear-gradient(top,#5eacc9,#5eacc9); 
background:linear-gradient(top,#5eacc9,#5eacc9); 
}
</style>
 <button type="button" class="btn04" onclick="window.open('http://35230.wodemo.com')">Click Me</button>

代码演示

html代码五

.btn05{
color: #784e6a;
border-color: #c681af; 
box-shadow:inset 0 1px 0 #ebadd5,0 1px 0 rgba(0,0,0,.2);
background:-webkit-linear-gradient(top,#e699cb,#d677b8); 
background:-moz-linear-gradient(top,#e699cb,#d677b8); 
background:-ms-linear-gradient(top,#e699cb,#d677b8); 
background:-o-linear-gradient(top,#e699cb,#d677b8); 
background:linear-gradient(top,#e699cb,#d677b8); 
}
.btn05:hover{
background:-webkit-linear-gradient(top,#f4b5de,#e082c2); 
background:-moz-linear-gradient(top,#f4b5de,#e082c2); 
background:-o-linear-gradient(top,#f4b5de,#e082c2); 
background:-ms-linear-gradient(top,#f4b5de,#e082c2); 
background:linear-gradient(top,#f4b5de,#e082c2); 
}
.btn05:active{
top:4px;
box-shadow:inset 0 1px 3px #9a2073;
background:-webkit-linear-gradient(top,#cc6dae,#cc6dae); 
background:-moz-linear-gradient(top,#cc6dae,#cc6dae); 
background:-ms-linear-gradient(top,#cc6dae,#cc6dae); 
background:-o-linear-gradient(top,#cc6dae,#cc6dae); 
background:linear-gradient(top,#cc6dae,#cc6dae); 
}
</style>
 <button type="button" class="btn05" onclick="window.open('http://35230.wodemo.com')">Click Me</button>

代码演示

【本站仅供参考，版权归原作者所有】

«Newer Older»

Back to home

Subscribe | Register | Login | N