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

2014-08-18 08:13:26 -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://luozhihao.wodemo.com')">Click Me</button>

代码演示

HTML代码

.btn02{position: relative;font-weight:bold;width:124px;height: 44px;border-radius: 3px;border: 1px solid #c0c0c0;}
 .btn02:before,
.btn02:after{
position: absolute;
content: "";
height: 50%;
border-radius: 50%;
z-index: -1;
}
.btn02:before {
width: 90%;
left: 5%;
top:12%;
box-shadow: 0 -7px 4px rgba(0,0,0,0.3);
}
.btn02:active:before {
width: 90%;
left: 5%;
top:12%;
box-shadow: 0 0 2px rgba(0,0,0,0.3);
}
.btn02:after {
width: 80%;
left: 10%;
bottom: 9%;
box-shadow: 0 7px 4px rgba(0,0,0,0.4);
}
.btn02:active:after {
width: 80%;
left: 10%;
bottom: 9%;
box-shadow: 0 0 0 rgba(0,0,0,0.4);
}

.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://luozhihao.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://luozhihao.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://luozhihao.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://luozhihao.wodemo.com')">Click Me</button>

代码演示

«Newer Older»

Back to home

Subscribe | Register | Login | N