logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

CSS3徽章按钮

 163九九 2016-07-25

最新CSS3徽章按钮-圆角+渐变

以下是三零网为大家整理的最新CSS3徽章按钮-圆角+渐变的文章，希望大家能够喜欢!

CSS3徽章按钮，非常漂亮，想学习CSS3的朋友不看后悔，效果中是一些圆角带渐变的CSS按钮，长方形和正方形的，而且还加有徽章，另外用CSS3制作一个Media播放器界面实属不错，有兴趣的可参考。

 

CSS3按钮徽章支持 FF CHrome
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>CSS3徽章按钮</title>
<style>
* {
margin:0; padding:0;
}

body {
font-family: Georgia;
background: #f2f2ea;
text-align: center;
color: #464530;
text-shadow: 0px 1px 0px #fff;
font-size: 30px;
font-weight: bold;
letter-spacing: -1px;
margin-top: 3%;
}
a, a:visited {
color: #464530;
text-decoration: none;
}
label {
font-size: 20px;
}
#content {
display: block;
width: 800px;
margin-right: auto;
margin-left: auto;
text-align: left;
}
/* Buttons */
.button-red {
font-family: Arial, Helvetica;
display: inline-block;
width: 200px;
height: 50px;
background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255,71,71)), color-stop(1, rgb(200,17,17)));
background : -moz-linear-gradient(center top, rgb(255,71,71) 25%, rgb(200,17,17) 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 1px;
cursor: pointer;
text-align: center;
}

.button-red:hover {
background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255,105,105)), color-stop(1, rgb(213,13,13)));
background : -moz-linear-gradient(center top, rgb(255,105,105) 25%, rgb(213,13,13) 100%);
}

.button-red:active {
background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255,71,71)), color-stop(1, rgb(200,17,17)));
background : -moz-linear-gradient(center top, rgb(255,71,71) 25%, rgb(200,17,17) 100%);
}

.button-red-inner {
display: inline-block;
width: 200px;
padding-top: 4%;
font-size: 25px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-top: 1px solid rgba(255, 255, 255, 0.6);
color: #fff;
text-shadow: 0px 1px 0px #6c0909;
}
.button-grey {
font-family: Arial, Helvetica;
display: inline-block;
width: 200px;
height: 50px;
background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(201,201,201)), color-stop(1, rgb(175,175,175)));
background : -moz-linear-gradient(center top, rgb(201,201,201) 25%, rgb(175,175,175) 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 1px;
cursor: pointer;
text-align: center;
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
position: relative;
}
.button-grey:hover {
background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(220,220,220)), color-stop(1, rgb(175,175,175)));
background : -moz-linear-gradient(center top, rgb(220,220,220) 25%, rgb(175,175,175) 100%);
}
.button-grey:active {
background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(201,201,201)), color-stop(1, rgb(175,175,175)));
background : -moz-linear-gradient(center top, rgb(201,201,201) 25%, rgb(175,175,175) 100%);
}

.square-grey-shade {
top: 0;
display: inline-block;
position: absolute;
width: 200px;
height: 25px;
margin-top: 2px;
background: rgba(255, 255,255, .2);
}

.button-grey-inner {
display: inline-block;
width: 200px;
padding-top: 4%;
font-size: 25px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-top: 1px solid rgba(255, 255, 255, 0.6);
color: #4a4a4a;
text-shadow: 0px 1px 0px #fff;
}

/* Squares */
.square-red {
font-family: Arial, Helvetica;
display: inline-block;
width: 60px;
height: 60px;
background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255,71,71)), color-stop(1, rgb(200,17,17)));
background : -moz-linear-gradient(center top, rgb(255,71,71) 25%, rgb(200,17,17) 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 1px;
cursor: pointer;
position: relative;
text-align: center;
}

.square-red:hover {
background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255,105,105)), color-stop(1, rgb(213,13,13)));
background : -moz-linear-gradient(center top, rgb(255,105,105) 25%, rgb(213,13,13) 100%);
}

.square-red:active {
background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255,71,71)), color-stop(1, rgb(200,17,17)));
background : -moz-linear-gradient(center top, rgb(255,71,71) 25%, rgb(200,17,17) 100%);
}
.square-blue {
font-family: Arial, Helvetica;
display: inline-block;
width: 60px;
height: 60px;
background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(71, 181, 255)), color-stop(1, rgb(0,133,222)));
background : -moz-linear-gradient(center top, rgb(71, 181, 255) 25%, rgb(0,133,222) 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 1px;
cursor: pointer;
position: relative;
text-align: center;
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
}

.square-blue:hover {
background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(108, 196, 255)), color-stop(1, rgb(0,133,222)));
background : -moz-linear-gradient(center top, rgb(108, 196, 255) 25%, rgb(0,133,222) 100%);
}

.square-blue:active {
background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(71, 181, 255)), color-stop(1, rgb(0,133,222)));
background : -moz-linear-gradient(center top, rgb(71, 181, 255) 25%, rgb(0,133,222) 100%);
}
.square-pink {
font-family: Arial, Helvetica;
display: inline-block;
width: 60px;
height: 60px;
background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255, 71, 206)), color-stop(1, rgb(234, 0, 172)));
background : -moz-linear-gradient(center top, rgb(255, 71, 206) 25%, rgb(234, 0, 172) 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 1px;
cursor: pointer;
position: relative;
text-align: center;
}

.square-pink:hover {
background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255, 124, 220)), color-stop(1, rgb(234, 0, 172)));
background : -moz-linear-gradient(center top, rgb(255, 124, 220) 25%, rgb(234, 0, 172) 100%);
}

.square-pink:active {
background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255, 71, 206)), color-stop(1, rgb(234, 0, 172)));
background : -moz-linear-gradient(center top, rgb(255, 71, 206) 25%, rgb(234, 0, 172) 100%);
}

.square-shade {
display: inline-block;
position: absolute;
width: 60px;
height: 30px;
margin-top: 2px;
background: rgba(255, 255,255, .2);
-webkit-border-radius: 5px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius: 5px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
border-radius: 5px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}

.square-inner {
display: inline-block;
width: 60px;
height: 43px;
padding-top: 25%;
font-size: 25px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-top: 1px solid rgba(255, 255, 255, 0.7);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
color: #fff;
text-shadow: 0px 1px 0px #6c0909;
}

/* Badges */
.badges-webstuffshare {
font-family: Arial, Helvetica;
display: inline-block;
width: 365px;
height: 214px;
background:red url('images/webstuffshare.png');
position: relative;
overflow: hidden;
text-align: center;
}

.badges-inner-left {
position: absolute;
left: -3.7em;
background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255,71,71)), color-stop(1, rgb(200,17,17)));
background : -moz-linear-gradient(center top, rgb(255,71,71) 25%, rgb(200,17,17) 100%);
padding-top: 1px;
height: 40px;
width: 200px;
font-size: 20px;
color: #fff;
text-shadow: 0px 1px 0px #6c0909;
-webkit-transform: rotate(-40deg);
-moz-transform: rotate(-40deg);
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
}

.badges-inner-right {
position: absolute;
right: -3em;
background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255,71,71)), color-stop(1, rgb(200,17,17)));
background : -moz-linear-gradient(center top, rgb(255,71,71) 25%, rgb(200,17,17) 100%);
padding-top: 1px;
height: 70px;
width: 200px;
font-size: 20px;
color: #fff;
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
text-shadow: 0px 1px 0px #6c0909;
}

.badges-text {
border-top: 1px solid rgba(255, 255, 255, 0.7);
padding-top: 9px;
}

/* Music Player */
.music-player {
font-family: Arial, Helvetica;
display: inline-block;
width: 600px;
height: 100px;
background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(201,201,201)), color-stop(1, rgb(128,132,135)));
background : -moz-linear-gradient(center top, rgb(201,201,201) 25%, rgb(128,132,135) 100%);
position: relative;
overflow: hidden;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0, 0.8);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0, 0.8);
box-shadow: 0px 1px 2px rgba(0,0,0, 0.8);
}

.music-player-inner {
display: inline-block;
width: 600px;
height: 100px;
padding-top: 3.5%;
font-size: 25px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-top: 1px solid rgba(255, 255, 255, 0.6);
}

.music-player-toggle {
margin-left: 1em;
display: inline-block;
width: 50px;
height: 50px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 1px 5px 0px rgba(255,255,255, 0.6);
-moz-box-shadow: 1px 5px 0px rgba(255,255,255, 0.6);
box-shadow: 1px 5px 0px rgba(255,255,255, 0.6);
}

.music-player-toggle-inner {
display: inline-block;
width: 50px;
height: 50px;
background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(252,252,252)), color-stop(1, rgb(128,132,135)));
background : -moz-linear-gradient(center top, rgb(252,252,252) 25%, rgb(128,132,135) 100%);
font-weight: bold;
font-size: 38px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
border: 2px solid #696b6b;
text-align: center;
}

.music-player-music {
margin-left: 2em;
display: inline-block;
width: 450px;
height: 50px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(227,233,195)), color-stop(1, rgb(198,218,149)));
background : -moz-linear-gradient(center top, rgb(227,233,195) 25%, rgb(198,218,149) 100%);
border-top: 1px solid rgba(255, 255, 255, 0.6);
-webkit-box-shadow: 0px -2px 1px rgba(0,0,0, 0.4);
-moz-box-shadow: 0px -2px 1px rgba(0,0,0, 0.4);
box-shadow: 0px -2px 1px rgba(0,0,0, 0.4);
position: relative;
}

.music-player-music-inner {
display: inline-block;
width: 450px;
height: 42px;
padding-top: 2%;
font-size: 25px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.music-player-shade {
top: 0;
display: inline-block;
position: absolute;
width: 450px;
height: 25px;
background: rgba(255, 255,255, .2);
}

.music-player-content {
text-align: center;
font-size: 12px;
letter-spacing: -.08em;
}

.music-player-slider {
margin-top: .5em;
display: inline-block;
width: 350px;
height: 9px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background: #a9b096;
-webkit-box-shadow: 0px -1px 0px rgba(0,0,0, 0.4);
-moz-box-shadow: 0px -1px 0px rgba(0,0,0, 0.4);
box-shadow: 0px -1px 0px rgba(0,0,0, 0.4);
}

</style>
</head>
<body>
<div id="content">
<label>Tested On Safari 4.0.5, Chrome 5.0.342.9 and Firefox 3.6</label>
<br/>
<br/>
<!-- Buttons -->
Buttons <br/>
<a class="button-red" href="#"> <span class="button-red-inner"> Button </span> </a> <a class="button-red" href="#"> <span class="button-red-inner"> Download </span> </a> <a class="button-grey" href="#"> <span class="button-grey-inner"> Grey Button </span> <span class="square-grey-shade"></span> </a> <br/>
<br/>
<!-- Squares -->
Squares <br/>
<a class="square-red" href="#"> <span class="square-shade"></span> <span class="square-inner"> OK </span> </a> <a class="square-red" href="#"> <span class="square-shade"></span> <span class="square-inner"> NO </span> </a> <a class="square-blue" href="#"> <span class="square-shade"></span> <span class="square-inner"> OK </span> </a> <a class="square-blue" href="#"> <span class="square-shade"></span> <span class="square-inner"> NO </span> </a> <a class="square-pink" href="#"> <span class="square-shade"></span> <span class="square-inner"> OK </span> </a> <a class="square-pink" href="#"> <span class="square-shade"></span> <span class="square-inner"> NO </span> </a> <br/>
<br/>
<!-- Badges -->
CSS Badges <br/>
<div class="badges-webstuffshare">
<div class="badges-inner-left">
<div class="badges-text">New!</div>
</div>
</div>
<div class="badges-webstuffshare">
<div class="badges-inner-right">
<div class="badges-text">Free<br/>
Subscribe</div>
</div>
</div>
<br/>
<br/>
<!-- Music Player -->
CSS Music Player <br/>
<div class="music-player">
<div class="music-player-inner">
<div class="music-player-toggle"> <span class="music-player-toggle-inner">ιι</span> </div>
<div class="music-player-music">
<div class="music-player-music-inner">
<div class="music-player-content"> Artist Name - Song Title <br/>
0:00
<div class="music-player-slider"> </div>
-3:59 </div>
<span class="music-player-shade"></span> </div>
</div>
</div>
</div>
<br/>
<br/>
</div>
</body>
</html>


延伸阅读:
·【导航菜单特效】CSS3按钮式导航菜单，横向，竖向
·CSS3漂亮按钮，圆角按钮
·纯CSS3 漂亮的按钮实例
·超漂亮的CSS3按钮，CSS3 Chunky Button Pack
·一个按钮CSS3 返回按钮
·【按钮特效】CSS3按钮代码集
·【按钮特效】CSS3按钮 动画下载按钮样式
·【按钮特效】圆形按钮HTML5/CSS3 button代码
·CSS3按钮代码集
·圆形按钮HTML5/CSS3 button代码
·CSS3按钮 动画下载按钮样式
·漂亮的CSS3按钮代码
·漂亮的CSS3按钮代码，在ie下需要使用图片才能表现出这样的效果

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 163九九 > 《html》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多