css3圆形修边按钮

版权：原创更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]
以下是 css3圆形修边按钮的示例演示效果:
当前平台(PC电脑)
平台:
整屏预览
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3圆形修边按钮</title>
<style>
html {
    text-align: center;
}
body {
	margin:0; 
	padding:0;
	font-family: Verdana, Geneva, sans-serif;
	background-color:#FFF;
	background:url(images/bg.jpg);
	background-size: 100% 100%;
}
h1 {
    background-color: #333;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:      -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:         linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    color: #fff0f5;
    font-size: 3em;
    font-weight: bold;
    line-height: 1;
    margin:0;
    padding: 0.5em;
    text-align: center;
    text-shadow: 0 .05em .05em hsla(0,0%,0%,.1);
}
h1 p a {
	margin:20px 0;
	font-size:16px;
	color:#ccc;
	text-decoration:none;
}
hr {
    border: 1px solid #333;
    margin: 0 0 2.5em 0;
}
h1 p a:hover {
	color:#FFF;
}
.content hr {
	border:0 none;
	margin:0 0 1em 0;
}
label:after {
    color: #fff;
    content: '#';
}
input {
    background: #fff0f5;
    border: 1px solid #222;
    color: #333;
    margin-right: 5.5em;
    padding: .5em;
}
.content {
    font-size: 100%;
    margin: 0 auto;
	display:inline-block;;
    padding: 3em 6em;
    text-align: left;
	padding:0;
}
.content p {
    color: #333;
    display: inline-block;
    font-size: 1em;
    font-weight: bold;
    line-height: 1;
    margin: -1em 1em 0 0;
    width: 6em;
    vertical-align: middle;
}
.footer {
    background-color: #333;
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    line-height: 1;
    margin: 2em 0 0 0;
    padding: 2em;
    text-align: center;
}
.attribution {
    color: #888;
    margin-top: 1em;
    text-align: right;
    width: 100%;
}
.attribution a {
    color: #888;
	text-decoration:none;
}
.attribution a:hover,
.attribution a:focus {
    color: #fff;
}

/* Button - these styles are the good stuff */

.button {
    background-color: #999;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:      -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:         linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    border: none;
    border-radius: .5em;
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,0.1),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.25),
                0 .25em .25em hsla(0,0%,0%,.05);
    color: #444;
    cursor: pointer;
    display: inline-block;
    font-family: sans-serif;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 .5em 1em;
    padding: .5em 1.5em .75em;
    position: relative;
    text-decoration: none;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.25);
    vertical-align: middle;
}
.button:hover {
    outline: none;
}
.button:hover,
.button:focus {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.25),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                0 .25em .25em hsla(0,0%,0%,.05);
}
.button:active {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                inset 0 .25em .5em hsla(0,0%,0%,.05),
                0 -1px 1px hsla(0,0%,0%,.1),
                0 1px 1px hsla(0,0%,100%,.25);
    margin-top: .25em;
    outline: none;
    padding-bottom: .5em;
}

/* Light Text */

.lightText {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.05),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.5),
                0 .25em .25em hsla(0,0%,0%,.1);
    color: #fff;
    text-shadow: 0 -1px 1px hsla(0,0%,0%,.25);
}
.lightText:hover,
.lightText:focus {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.05),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.5),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                0 .25em .25em hsla(0,0%,0%,.1);
}
.lightText:active {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.05),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                inset 0 .25em .5em hsla(0,0%,0%,.05),
                0 -1px 1px hsla(0,0%,0%,.1),
                0 1px 1px hsla(0,0%,100%,.25);
}

/* Large */

.large {
    font-size: 1.25em;
}

/* Medium */

.medium {
    font-size: 1em;
}

/* Small */

.small {
    font-size: .75em;
}

/* Regular */

.regular {
    border-radius: .5em;
}

/* Square */

.square {
    border-radius: .25em;
}

/* Round */

.round {
    border-radius: 1.25em;
}

/* Red */

.red {
    background-color: #ff6c6f;
}

/* Orange */

.orange {
    background-color: #f6cf6f;
}

/* Yellow */

.yellow {
    background-color: #fff6c6;
}

/* Green */

.green {
    background-color: #6fcf6f;
}

/* Blue */

.blue {
    background-color: #6fc6ff;
}

/* Purple */

.purple {
    background-color: #f6c6ff;
}

/* White */

.white {
    background-color: #eee;
}

/* Grey */

.grey {
    background-color: #999;
}

/* Black */

.black {
    background-color: #444;
}

/* Custom */

.custom {
    background-color: #fff0f5; /* Set the button color here */
    color: #444; /* Remove this for a dark background */
}
</style>
</head>

<body>
<h1>css3圆形修边按钮</h1>
<hr>
<div class="content">
<p>Red</p>
<a class="button large regular red" href="javascript:void(0);">Button</a>
<a class="button medium regular red" href="javascript:void(0);">Button</a>
<a class="button small regular red" href="javascript:void(0);">Button</a>
<a class="button large square red" href="javascript:void(0);">Button</a>
<a class="button medium square red" href="javascript:void(0);">Button</a>
<a class="button small square red" href="javascript:void(0);">Button</a>
<a class="button large round red" href="javascript:void(0);">Button</a>
<a class="button medium round red" href="javascript:void(0);">Button</a>
<a class="button small round red" href="javascript:void(0);">Button</a>
<hr>
<p>Orange</p>
<a class="button large regular orange" href="javascript:void(0);">Button</a>
<a class="button medium regular orange" href="javascript:void(0);">Button</a>
<a class="button small regular orange" href="javascript:void(0);">Button</a>
<a class="button large square orange" href="javascript:void(0);">Button</a>
<a class="button medium square orange" href="javascript:void(0);">Button</a>
<a class="button small square orange" href="javascript:void(0);">Button</a>
<a class="button large round orange" href="javascript:void(0);">Button</a>
<a class="button medium round orange" href="javascript:void(0);">Button</a>
<a class="button small round orange" href="javascript:void(0);">Button</a>
<hr>
<p>Yellow</p>
<a class="button large regular yellow" href="javascript:void(0);">Button</a>
<a class="button medium regular yellow" href="javascript:void(0);">Button</a>
<a class="button small regular yellow" href="javascript:void(0);">Button</a>
<a class="button large square yellow" href="javascript:void(0);">Button</a>
<a class="button medium square yellow" href="javascript:void(0);">Button</a>
<a class="button small square yellow" href="javascript:void(0);">Button</a>
<a class="button large round yellow" href="javascript:void(0);">Button</a>
<a class="button medium round yellow" href="javascript:void(0);">Button</a>
<a class="button small round yellow" href="javascript:void(0);">Button</a>
<hr>
<p>Green</p>
<a class="button large regular green" href="javascript:void(0);">Button</a>
<a class="button medium regular green" href="javascript:void(0);">Button</a>
<a class="button small regular green" href="javascript:void(0);">Button</a>
<a class="button large square green" href="javascript:void(0);">Button</a>
<a class="button medium square green" href="javascript:void(0);">Button</a>
<a class="button small square green" href="javascript:void(0);">Button</a>
<a class="button large round green" href="javascript:void(0);">Button</a>
<a class="button medium round green" href="javascript:void(0);">Button</a>
<a class="button small round green" href="javascript:void(0);">Button</a>
<hr>
<p>Blue</p>
<a class="button large regular blue" href="javascript:void(0);">Button</a>
<a class="button medium regular blue" href="javascript:void(0);">Button</a>
<a class="button small regular blue" href="javascript:void(0);">Button</a>
<a class="button large square blue" href="javascript:void(0);">Button</a>
<a class="button medium square blue" href="javascript:void(0);">Button</a>
<a class="button small square blue" href="javascript:void(0);">Button</a>
<a class="button large round blue" href="javascript:void(0);">Button</a>
<a class="button medium round blue" href="javascript:void(0);">Button</a>
<a class="button small round blue" href="javascript:void(0);">Button</a>
<hr>
<p>Purple</p>
<a class="button large regular purple" href="javascript:void(0);">Button</a>
<a class="button medium regular purple" href="javascript:void(0);">Button</a>
<a class="button small regular purple" href="javascript:void(0);">Button</a>
<a class="button large square purple" href="javascript:void(0);">Button</a>
<a class="button medium square purple" href="javascript:void(0);">Button</a>
<a class="button small square purple" href="javascript:void(0);">Button</a>
<a class="button large round purple" href="javascript:void(0);">Button</a>
<a class="button medium round purple" href="javascript:void(0);">Button</a>
<a class="button small round purple" href="javascript:void(0);">Button</a>
<hr>
<p>White</p>
<a class="button large regular white" href="javascript:void(0);">Button</a>
<a class="button medium regular white" href="javascript:void(0);">Button</a>
<a class="button small regular white" href="javascript:void(0);">Button</a>
<a class="button large square white" href="javascript:void(0);">Button</a>
<a class="button medium square white" href="javascript:void(0);">Button</a>
<a class="button small square white" href="javascript:void(0);">Button</a>
<a class="button large round white" href="javascript:void(0);">Button</a>
<a class="button medium round white" href="javascript:void(0);">Button</a>
<a class="button small round white" href="javascript:void(0);">Button</a>
<hr>
<p>Grey</p>
<a class="button lightText large regular grey" href="javascript:void(0);">Button</a>
<a class="button lightText medium regular grey" href="javascript:void(0);">Button</a>
<a class="button lightText small regular grey" href="javascript:void(0);">Button</a>
<a class="button lightText large square grey" href="javascript:void(0);">Button</a>
<a class="button lightText medium square grey" href="javascript:void(0);">Button</a>
<a class="button lightText small square grey" href="javascript:void(0);">Button</a>
<a class="button lightText large round grey" href="javascript:void(0);">Button</a>
<a class="button lightText medium round grey" href="javascript:void(0);">Button</a>
<a class="button lightText small round grey" href="javascript:void(0);">Button</a>
<hr>
<p>Black</p>
<a class="button lightText large regular black" href="javascript:void(0);">Button</a>
<a class="button lightText medium regular black" href="javascript:void(0);">Button</a>
<a class="button lightText small regular black" href="javascript:void(0);">Button</a>
<a class="button lightText large square black" href="javascript:void(0);">Button</a>
<a class="button lightText medium square black" href="javascript:void(0);">Button</a>
<a class="button lightText small square black" href="javascript:void(0);">Button</a>
<a class="button lightText large round black" href="javascript:void(0);">Button</a>
<a class="button lightText medium round black" href="javascript:void(0);">Button</a>
<a class="button lightText small round black" href="javascript:void(0);">Button</a>
</div>
</body>
</html>
附件:下载该文件资源,减少时间成本(增值服务)