css3 적용된 버튼 3 (다양한 색상 및 형식 지원)
작성일 16-08-26 13:46
페이지 정보
작성자서방님 조회 118회 댓글 0건본문
출처 : http://www.blueb.co.kr/?c=2/32&p=2&uid=3627
<!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>http://www.blueb.co.kr</title>
<link rel="stylesheet" href="http://www.blueb.co.kr/data/201012/IJ12920856945214/css-buttons.css" type="text/css" title="default" />
<style type="text/css">
/* 페이지 디자인(버튼 스타일은 css-buttons.css참고 )------------------------------------------- */
body {
font:13px/1.5 Arial, Helvetica, Helvetica Neue, Verdana, sans-serif;
color:#222;
}
a, button, input {margin:9px;color:#222;}
hr {
border:0px #eaeaea solid;
border-top-width: 1px;
clear: both;
height: 0;
margin:20px 0;
}
code {
padding:5px;
background:#eaeaea;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
display:block;
-moz-box-shadow:0 1px 1px #999 inset;
-webkit-box-shadow:0 1px 1px #999 inset;
box-shadow:0 1px 1px #999 inset;
}
#wrap, #footer {
width:960px;
margin:20px auto;
}
#footer {text-align:center;}
.highlight {background:#3399FF;padding:2px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("a").click(function() {
return false;
});
});
</script>
</head>
<body>
<div id="wrap">
<p>Small Link Buttons: <code><a class="small button" href="#"><span>Red</span></a></code></p>
<!-- small -->
<a class="small button" href="#">
<span>Black</span>
</a>
<a class="small blue button" href="#">
<span>Blue</span>
</a>
<a class="small purple button" href="#">
<span>Purple</span>
</a>
<a class="small green button" href="#">
<span>Green</span>
</a>
<a class="small breen button" href="#">
<span>Breen</span>
</a>
<a class="small magenta button" href="#">
<span>Magenta</span>
</a>
<a class="small red button" href="#">
<span>Red</span>
</a>
<a class="small orange button" href="#">
<span>Orange</span>
</a>
<a class="small yellow button" href="#">
<span>Yellow</span>
</a>
<a class="small gray button" href="#">
<span>Gray</span>
</a>
<a class="small white button" href="#">
<span>White</span>
</a>
<!-- end small -->
<hr />
<p>Small Submit Buttons: <code><input type="submit" class="small button input" value="Submit" /></code></p>
<!-- small inputs -->
<input type="submit" class="small button input" value="Submit" />
<input type="submit" class="small button blue input" value="Submit" />
<input type="submit" class="small button purple input" value="Submit" />
<input type="submit" class="small button green input" value="Submit" />
<input type="submit" class="small button breen input" value="Submit" />
<input type="submit" class="small button magenta input" value="Submit" />
<input type="submit" class="small button red input" value="Submit" />
<input type="submit" class="small button orange input" value="Submit" />
<input type="submit" class="small button yellow input" value="Submit" />
<input type="submit" class="small button gray input" value="Submit" />
<input type="submit" class="small button white input" value="Submit" />
<!-- end small inputs -->
<hr />
<p>Small Buttons: <code><button class="small button"><span>Continue</span></button></code></p>
<!-- small buttons -->
<button class="small button">
<span>Continue</span>
</button>
<button class="small blue button">
<span>Continue</span>
</button>
<button class="small purple button">
<span>Continue</span>
</button>
<button class="small green button">
<span>Continue</span>
</button>
<button class="small breen button">
<span>Continue</span>
</button>
<button class="small magenta button">
<span>Continue</span>
</button>
<button class="small red button">
<span>Continue</span>
</button>
<button class="small orange button">
<span>Continue</span>
</button>
<button class="small yellow button">
<span>Continue</span>
</button>
<button class="small gray button">
<span>Continue</span>
</button>
<button class="small white button">
<span>Continue</span>
</button>
<!-- end small buttons -->
<hr />
<p>Large Link Buttons: <code><a class="large button" href="#"><span>Red</span></a></code></p>
<!-- large -->
<a class="large button" href="#">
<span>Black</span>
</a>
<a class="large blue button" href="#">
<span>Blue</span>
</a>
<a class="large purple button" href="#">
<span>Purple</span>
</a>
<a class="large green button" href="#">
<span>Green</span>
</a>
<a class="large breen button" href="#">
<span>Breen</span>
</a>
<a class="large magenta button" href="#">
<span>Magenta</span>
</a>
<a class="large red button" href="#">
<span>Red</span>
</a>
<a class="large orange button" href="#">
<span>Orange</span>
</a>
<a class="large yellow button" href="#">
<span>Yellow</span>
</a>
<a class="large gray button" href="#">
<span>Gray</span>
</a>
<a class="large white button" href="#">
<span>White</span>
</a>
<!-- end large -->
<hr />
<p>Large Submit Buttons: <code><input type="submit" class="large button input" value="Submit" /></code></p>
<!-- large inputs -->
<input type="submit" class="large button input" value="Submit" />
<input type="submit" class="large button blue input" value="Submit" />
<input type="submit" class="large button purple input" value="Submit" />
<input type="submit" class="large button green input" value="Submit" />
<input type="submit" class="large button breen input" value="Submit" />
<input type="submit" class="large button magenta input" value="Submit" />
<input type="submit" class="large button red input" value="Submit" />
<input type="submit" class="large button orange input" value="Submit" />
<input type="submit" class="large button yellow input" value="Submit" />
<input type="submit" class="large button gray input" value="Submit" />
<input type="submit" class="large button white input" value="Submit" />
<!-- end large inputs -->
<hr />
<p>Large Buttons: <code><button class="large button"><span>Continue</span></button></code></p>
<!-- large buttons -->
<button class="large button">
<span>Continue</span>
</button>
<button class="large blue button">
<span>Continue</span>
</button>
<button class="large purple button">
<span>Continue</span>
</button>
<button class="large green button">
<span>Continue</span>
</button>
<button class="large breen button">
<span>Continue</span>
</button>
<button class="large magenta button">
<span>Continue</span>
</button>
<button class="large red button">
<span>Continue</span>
</button>
<button class="large orange button">
<span>Continue</span>
</button>
<button class="large yellow button">
<span>Continue</span>
</button>
<button class="large gray button">
<span>Continue</span>
</button>
<button class="large white button">
<span>Continue</span>
</button>
<!-- end large buttons -->
<hr />
<p>Large Link Download Buttons: <code><a class="large button download" href="#"><span>Download <small>(0.55 KB)</small></span></a></code></p>
<!-- large link dl-->
<a class="large button download" href="#">
<span>Download <small>(0.55 KB)</small></span>
</a>
<a class="large blue button download" href="#">
<span>Download <small>(0.55 KB)</small></span>
</a>
<a class="large purple button dlLight" href="#">
<span>Download <small>(0.55 KB)</small></span>
</a>
<a class="large green button dlLight" href="#">
<span>Grab The Source <small>(0.55 KB)</small></span>
</a>
<a class="large breen button dlLight" href="#">
<span>Download <small>(0.55 KB)</small></span>
</a>
<a class="large magenta button dlLight" href="#">
<span>Download <small>(0.55 KB)</small></span>
</a>
<a class="large red button dlLight" href="#">
<span>Download <small>(0.55 KB)</small></span>
</a>
<a class="large orange button dlLight" href="#">
<span>Grab The Source <small>(0.55 KB)</small></span>
</a>
<a class="large yellow button dlLight" href="#">
<span>Download <small>(0.55 KB)</small></span>
</a>
<a class="large gray button dlDark" href="#">
<span>Download <small>(0.55 KB)</small></span>
</a>
<a class="large white button download" href="#">
<span>Download <small>(0.55 KB)</small></span>
</a>
<!-- end large link dl -->
<hr />
<p>Double Decker Buttons: <code><a class="tall button" href="#"><span>Click This<em>Try it today for free!</em></span></a></code></p>
<!-- Tall Buttons -->
<a class="tall button" href="#">
<span>Click This<em>Try it today for free!</em></span>
</a>
<a class="tall blue button" href="#">
<span>Click This<em>Try it today for free!</em></span>
</a>
<a class="tall purple button" href="#">
<span>Click This<em>Try it today for free!</em></span>
</a>
<a class="tall green button" href="#">
<span>Click This<em>Try it today for free!</em></span>
</a>
<a class="tall breen button" href="#">
<span>Click This<em>Try it today for free!</em></span>
</a>
<a class="tall magenta button" href="#">
<span>Click This<em>Try it today for free!</em></span>
</a>
<a class="tall red button" href="#">
<span>Click This<em>Try it today for free!</em></span>
</a>
<a class="tall orange button" href="#">
<span>Click This<em>Try it today for free!</em></span>
</a>
<a class="tall yellow button" href="#">
<span>Click This<em>Try it today for free!</em></span>
</a>
<a class="tall gray button" href="#">
<span>Click This<em>Try it today for free!</em></span>
</a>
<a class="tall white button" href="#">
<span>Click This<em>Try it today for free!</em></span>
</a>
<!-- end tall -->
<hr />
<p>Double Decker Download Buttons: <code><a class="tall button download" href="#"><span>Download Now!<em>Free 30 Day Trial</em></span></a></code></p>
<!--Double Decker -->
<a class="tall button download" href="#">
<span>Download Now!<em>Free 30 Day Trial</em></span>
</a>
<a class="tall button blue download" href="#">
<span>Download Now!<em>Free 30 Day Trial</em></span>
</a>
<a class="tall button purple download" href="#">
<span>Download Now!<em>Free 30 Day Trial</em></span>
</a>
<a class="tall button green download light" href="#">
<span>Download Now!<em>Free 30 Day Trial</em></span>
</a>
<a class="tall button breen download light" href="#">
<span>Download Now!<em>Free 30 Day Trial</em></span>
</a>
<a class="tall button magenta download light" href="#">
<span>Download Now!<em>Free 30 Day Trial</em></span>
</a>
<a class="tall button red download light" href="#">
<span>Download Now!<em>Free 30 Day Trial</em></span>
</a>
<a class="tall button orange download light" href="#">
<span>Download Now!<em>Free 30 Day Trial</em></span>
</a>
<a class="tall button yellow download light" href="#">
<span>Download Now!<em>Free 30 Day Trial</em></span>
</a>
<a class="tall button gray download" href="#">
<span>Download Now!<em>Free 30 Day Trial</em></span>
</a>
<a class="tall button white download light" href="#">
<span>Download Now!<em>Free 30 Day Trial</em></span>
</a>
<!-- end double decker -->
<hr />
<p>Small Round Link Buttons: <code><a class="small round button" href="#"><span>Red</span></a></code></p>
<!-- small -->
<a class="small round button" href="#">
<span>Black</span>
</a>
<a class="small round blue button" href="#">
<span>Blue</span>
</a>
<a class="small round purple button" href="#">
<span>Purple</span>
</a>
<a class="small round green button" href="#">
<span>Green</span>
</a>
<a class="small round breen button" href="#">
<span>Breen</span>
</a>
<a class="small round magenta button" href="#">
<span>Magenta</span>
</a>
<a class="small round red button" href="#">
<span>Red</span>
</a>
<a class="small round orange button" href="#">
<span>Orange</span>
</a>
<a class="small round yellow button" href="#">
<span>Yellow</span>
</a>
<a class="small round gray button" href="#">
<span>Gray</span>
</a>
<a class="small round white button" href="#">
<span>White</span>
</a>
<!-- end small -->
<hr />
<p>Small Round Submit Buttons: <code><input type="submit" class="small round button input" value="Submit" /></code></p>
<!-- small inputs -->
<input type="submit" class="small round button input" value="Submit" />
<input type="submit" class="small round button blue input" value="Submit" />
<input type="submit" class="small round button purple input" value="Submit" />
<input type="submit" class="small round button green input" value="Submit" />
<input type="submit" class="small round button breen input" value="Submit" />
<input type="submit" class="small round button magenta input" value="Submit" />
<input type="submit" class="small round button red input" value="Submit" />
<input type="submit" class="small round button orange input" value="Submit" />
<input type="submit" class="small round button yellow input" value="Submit" />
<input type="submit" class="small round button gray input" value="Submit" />
<input type="submit" class="small round button white input" value="Submit" />
<!-- end small inputs -->
<hr />
<p>Small Round Buttons: <code><button class="small round button"><span>Continue</span></button></code></p>
<!-- small buttons -->
<button class="small round button">
<span>Continue</span>
</button>
<button class="small round blue button">
<span>Continue</span>
</button>
<button class="small round purple button">
<span>Continue</span>
</button>
<button class="small round green button">
<span>Continue</span>
</button>
<button class="small round breen button">
<span>Continue</span>
</button>
<button class="small round magenta button">
<span>Continue</span>
</button>
<button class="small round red button">
<span>Continue</span>
</button>
<button class="small round orange button">
<span>Continue</span>
</button>
<button class="small round yellow button">
<span>Continue</span>
</button>
<button class="small round gray button">
<span>Continue</span>
</button>
<button class="small round white button">
<span>Continue</span>
</button>
<!-- end small buttons -->
<hr />
<p>Round Link Buttons: <code><a class="round button" href="#"><span>Demo</span></a></code></p>
<!-- round -->
<a href="#" class="round button">
<span>Demo</span>
</a>
<a href="#" class="round blue button">
<span>Visit Site »</span>
</a>
<a href="#" class="round purple button">
<span>Demo</span>
</a>
<a href="#" class="round green button">
<span>Visit Site »</span>
</a>
<a href="#" class="round breen button">
<span>Demo</span>
</a>
<a href="#" class="round magenta button">
<span>Visit Site »</span>
</a>
<a href="#" class="round red button">
<span>Demo</span>
</a>
<a href="#" class="round orange button">
<span>Visit Site »</span>
</a>
<a href="#" class="round yellow button">
<span>Demo</span>
</a>
<a href="#" class="round gray button">
<span>Visit Site »</span>
</a>
<a href="#" class="round white button">
<span>Demo</span>
</a>
<hr />
<p>Large Round Link Buttons: <code><a class="round large button" href="#"><span>Download Plugin<small>(0.72 KB)</small></span></a></code></p>
<!-- large round -->
<a class="round large button" href="#">
<span>Download Plugin <small>(0.72 KB)</small></span>
</a>
<a class="round large blue button" href="#">
<span>Grab the Source <small>(0.55 KB)</small></span>
</a>
<a class="round large purple button" href="#">
<span>Download Plugin <small>(0.72 KB)</small></span>
</a>
<a class="round large green button" href="#">
<span>Grab the Source <small>(0.55 KB)</small></span>
</a>
<a class="round large breen button" href="#">
<span>Download Plugin <small>(0.72 KB)</small></span>
</a>
<a class="round large magenta button" href="#">
<span>Grab the Source <small>(0.55 KB)</small></span>
</a>
<a class="round large red button" href="#">
<span>Download Plugin <small>(0.72 KB)</small></span>
</a>
<a class="round large orange button" href="#">
<span>Grab the Source <small>(0.55 KB)</small></span>
</a>
<a class="round large yellow button" href="#">
<span>Download Plugin <small>(0.72 KB)</small></span>
</a>
<a class="round large gray button" href="#">
<span>Grab the Source <small>(0.55 KB)</small></span>
</a>
<a class="round large white button" href="#">
<span>Download Plugin <small>(0.72 KB)</small></span>
</a>
<!-- end round -->
<hr />
<p>Large Round Download Buttons: <code><a class="round large button download" href="#"><span>Download Plugin<small>(0.72 KB)</small></span></a></code></p>
<!-- large round dl-->
<a class="round large button download" href="#">
<span>Download Plugin <small>(0.72 KB)</small></span>
</a>
<a class="round large blue button download" href="#">
<span>Grab the Source <small>(0.55 KB)</small></span>
</a>
<a class="round large purple button dlLight" href="#">
<span>Download Plugin <small>(0.72 KB)</small></span>
</a>
<a class="round large green button dlLight" href="#">
<span>Grab the Source <small>(0.55 KB)</small></span>
</a>
<a class="round large breen button dlLight" href="#">
<span>Download Plugin <small>(0.72 KB)</small></span>
</a>
<a class="round large magenta button download" href="#">
<span>Grab the Source <small>(0.55 KB)</small></span>
</a>
<a class="round large red button dlLight" href="#">
<span>Download Plugin <small>(0.72 KB)</small></span>
</a>
<a class="round large orange button dlLight" href="#">
<span>Grab the Source <small>(0.55 KB)</small></span>
</a>
<a class="round large yellow button dlLight" href="#">
<span>Download Plugin <small>(0.72 KB)</small></span>
</a>
<a class="round large gray button dlDark" href="#">
<span>Grab the Source <small>(0.55 KB)</small></span>
</a>
<a class="round large white button dlDark" href="#">
<span>Download Plugin <small>(0.72 KB)</small></span>
</a>
<!-- end round dl -->
<hr />
<p>Large Round Buy Button: <code><a class="round large blue button buy" href="#"><span>Buy It<small>$12.99</small></span></a></code></p>
<!-- large round buy-->
<a class="round large button buy" href="#">
<span>Buy It <small>$12.99</small></span>
</a>
<a class="round large blue button buy" href="#">
<span>Buy It <small>$12.99</small></span>
</a>
<a class="round large purple button buy" href="#">
<span>Buy It <small>$12.99</small></span>
</a>
<a class="round large green button buy" href="#">
<span>Buy It <small>$12.99</small></span>
</a>
<a class="round large breen button buy" href="#">
<span>Buy It <small>$12.99</small></span>
</a>
<a class="round large magenta button buy" href="#">
<span>Buy It <small>$12.99</small></span>
</a>
<a class="round large red button buy" href="#">
<span>Buy It <small>$12.99</small></span>
</a>
<a class="round large orange button buy" href="#">
<span>Buy It <small>$12.99</small></span>
</a>
<!-- end round dl -->
<hr />
<p>Round Twitter Buttons: <code><a class="round button follow" href="#"><span>Follow me on Twitter</span></a></code></p>
<!-- twitter -->
<a href="#" class="round button follow">
<span>Follow me on Twitter</span>
</a>
<a href="#" class="round blue button follow">
<span>Follow me on Twitter</span>
</a>
<a href="#" class="round purple button follow">
<span>Follow me on Twitter</span>
</a>
<a class="round button green follow" href="#">
<span>Follow me on Twitter</span>
</a>
<a href="#" class="round button breen follow">
<span>Follow me on Twitter</span>
</a>
<a href="#" class="round magenta button follow">
<span>Follow me on Twitter</span>
</a>
<a href="#" class="round red button follow">
<span>Follow me on Twitter</span>
</a>
<a href="#" class="round orange button follow">
<span>Follow me on Twitter</span>
</a>
<a href="#" class="round yellow button follow">
<span>Follow me on Twitter</span>
</a>
<a href="#" class="round gray button follow">
<span>Follow me on Twitter</span>
</a>
<a href="#" class="round white button follow">
<span>Follow me on Twitter</span>
</a>
<!-- end twitter -->
<p>Small Social Buttons: <code><a class="small social rss button" href="#"><span>RSS</span></a></code></p>
<!-- Social Buttons -->
<a href="#" class="small social rss button">
<span>RSS</span>
</a>
<a href="#" class="small social twitter button">
<span>Twitter</span>
</a>
<a href="#" class="small social fb button">
<span>Facebook</span>
</a>
<a href="#" class="small social delicious button">
<span>Delicious</span>
</a>
<a href="#" class="small social in button">
<span>Linked in</span>
</a>
<!-- end social butons -->
<hr />
</div>
</body>
</html>
첨부파일
- css-buttons.css (8.2K) 1회 다운로드 | DATE : 2016-08-26 13:47:37
댓글목록
등록된 댓글이 없습니다.