c06. CSS 링크 버튼

CSS 링크 버튼

몇 가지 CSS 프로퍼티를 조합하면 박스 형태의 버튼으로 링크를 표현할 수 있습니다.

<style>
.txtlink {color: green; text-decoration:none; margin-left:20px; font-size:16px;}
.txtlink:hover {text-decoration:underline;}
	/*형태로서 마우스 올라가면 밑줄 생기게 설정됨*/
.button1 {display:inline-block; background-color:#f44336; color: #FFFFFF; padding: 14px 25px; text-align: center; text-decoration: none; font-size: 16px; margin-left: 20px; opacity: 0.9; border-radius: 5px;}
.button1:hover {color:white; background-color:pink; opacity:1.0;}
	/*마우스 올라가면 배경색이 핑크색에 글자 흰색으로 바뀜 */
.button2 {background-color: white; color: black; border: 2px solid #44bb55; padding: 14px 24px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin-left: 20px;}
.button2:hover {background-color: #44bb55; color: white;}
  /*마우스 올라가면 배경색 및 글자 색 바뀜*/
</style>
<a href="javascript:void(0)" class="txtlink">일반적인 텍스트 링크</a>
<a href="http://www.daum.net/" class="button1" target="_blank">다음으로 이동</a>
<a href="http://www.naver.com/" class="button2" target="_blank">네이버로 이동</a>

일반적인 텍스트 링크 다음으로 이동 네이버로 이동

---

<p>Button Generator 사이트 같은 곳에서 CSS 버튼 코드를 복사해서 쓸 수 있습니다.</p>
<a href="http://www.bestcssbuttongenerator.com/" class="myButton" target="_blank">Button Generator 사이트로 새창 띄우기</a>

<style>
.myButton {
-moz-box-shadow: 0px 10px 14px -7px #276873;
-webkit-box-shadow: 0px 10px 14px -7px #276873;
box-shadow: 0px 10px 14px -7px #276873;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
background-color:#599bb3;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:20px;
font-weight:bold;
padding:13px 32px;
text-decoration:none;
text-shadow:0px 1px 0px #3d768a;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
background-color:#408c99;
}
.myButton:active {
position:relative;
top:1px;
}
</style>

Button Generator 사이트 같은 곳에서 CSS 버튼 코드를 복사해서 쓸 수 있습니다.

Button Generator 사이트로 새창 띄우기

단, 링크의 상태별 스타일 설정은 코딩하는 순서가 있습니다. 

아래처럼 hover 는 link 다음으로 와야 하고, active 는 hover 다음에 와야 합니다.

a:link 또는 a:visited
a:hover
a:active

---

[광고] Udemy 동영상 강의로 보기