html 버튼 만들기, 디자인 링크 클릭시 페이지 이동하기

by

기본적으로 html 에서 버튼을 삽입하기 위해서는 button 태그를 사용하게 되며 링크를 연결하기 위해서는 onclick 속성을넣고 form action 속성으로 서버 전송이 가능합니다.

html 버튼만들기

button 태그를 사용하며 name 버튼 이름을 지정하고 텍스트를 삽입하여 간단하게 버튼을 만들수가 있습니다.

<body>
   <button name="button">버튼입니다.</button>
</body>

버튼 클릭시 페이지 이동

onclick 속성에 페이지로 이동할 링크 주소를 입력하여 사용자가 원하는 페이지로 넘어갈수가 있습니다.

<body>
  <button type="botton" onclick="location.href='http://naver.com'">버튼링크</button>
</body>

검색창 전송버튼만들기

input type=”submit” 전송 버튼을 만들어서 검색창에 입력시 form action 전송할 서버로 이동합니다.

 <body>
   <form action="http://localhost/form.php">
   <input type="text">
   <input type="submit" value="전송"> 
 </body>

버튼 CSS 메뉴 꾸미기

HTML 링크버튼을 만들어서 CSS 로 디자인하여 메뉴 기본 메뉴 버튼을 만들기 하였으며 style(스타일시트)에 button{} 속성을입력하여 버튼 꾸미기가 가능합니다.

<!DOCTYPE HTML>
<HTML>
 <HEAD>
 <style>
button{
	width:100px;
	height: 25px;
	color:#fff;
	background: #353535;
	font-size: 12px;
	border: lpx color:#FFFFFF;
	left:50%;
	top:50%;	
	display: inline;
}
button:focus {
	outline:0;
}
button:hover{
	background: rgba(0,79,255,0.9);
	cursor: pointer;	
}
 </style> 
 </HEAD>
  <body>
   <button type="botton01" onclick="location.href='01.html'">메뉴01</button>
   <button type="botton02" onclick="location.href='02.html'">메뉴02</button>
   <button type="botton03" onclick="location.href='03.html'">메뉴03</button>
   <button type="botton04" onclick="location.href='04.html'">메뉴04</button>   
   <button type="botton05" onclick="location.href='05.html'">메뉴05</button>   
  </body>
</HTML>
▤ 목차 목차 보이기

Leave a Comment