[CSS3] 기본 버튼 스타일

Notice

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

SNOWFLAKES DRAWING PAPER

[CSS3] 기본 버튼 스타일 본문

개발/HTML5/CSS3

[CSS3] 기본 버튼 스타일

눈송2 2015. 1. 22. 20:47

...
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
		<script src="fzoolib.js"></script>
		<script>
			var cnt = 0;
			loadJsStart('strutil.js',init,'utils.js');
			
			function init() {
				
			}
		</script>
		<style>
			.container {
				padding-left: 30px;
				padding-top: 20px;
			}
			
			/*
			.button1 {
				display: inline-block;
				padding: 10px 45px;
				background-color: #007236;
				color: #FFF;
				font-family: Arial, sans;
				font-size: 45px;
				text-decoration: none;
				border: 2px solid #004b23;
				
				border-radius: 10px;
			}
			.button1:hover {
				background-color: #00501e;
				border-color: #003517;
			}
			.button1:active {
				background-color: #00451a;
				border-color: #00280f;
			}
			*/
			
			.button {
				background-image: -webkit-gradient(
				linear,
				left top,
				left bottom,
				from(#007231),
				to(#004b23),
				color-stop(0.3,#00893b)
				);
				
				padding: 10px 20px;
				color: #FFF;
				font-family: Arial, sans;
				font-size: 45px;
				text-decoration: none;
				border: 2px solid #004b23;
				border-radius: 10px;
			}
			.button:hover {
				background-image: -webkit-gradient(
					linear,
					left top,
					left bottom,
					from(#005e27),
					to(#003719),
					color-stop(0.3,#007531)
				);
			}
			.button:active {
			/*
				background-color: #00451a;
				border-color: #00280f;
				*/
				background-image: -webkit-gradient(
					linear,
					left top,
					left bottom,
					from(#004f1d),
					to(#00280f),
					color-stop(0.3,#006627)
				);
			}
		</style>
...
	<div class="container">
		<a href="#" class="button">Contact Us</a>
	</div>
...

저작자표시 비영리

'개발 > HTML5/CSS3' 카테고리의 다른 글

[HTML5] 웹소켓 샘플 (0)	2015.02.03
[HTML5] 모바일 사이트에서 onorientationchange 구현 (0)	2015.01.25
[HTML5] 로컬 저장소 (localStorage) 사용 (0)	2015.01.22
[HTML5] Video Player Control (0)	2015.01.03
[HTML5] Geolocation (0)	2012.08.13

'개발/HTML5/CSS3' Related Articles

Comments

SNOWFLAKES DRAWING PAPER

[CSS3] 기본 버튼 스타일 본문

[CSS3] 기본 버튼 스타일

'개발 > HTML5/CSS3' 카테고리의 다른 글

티스토리툴바