아래에 나와 있는 HTML 코드와 CSS 코드를
메모장에 각각 복사해 두었다가
원하시는 곳에 붙여넣기 해서 사용하시면 편리합니다.
HTML 코드
<a href="#" class="myButton">blue</a>
CSS 코드
.myButton {
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
background-color:#79bbff;
border-radius:17px;
border:3px solid #84bbf3;
display:inline-block;
cursor:pointer;
color:#ffffff!important;
font-family:Arial;
font-size:20px;
font-weight:bold;
padding:6px 64px;
text-decoration:none;
text-shadow:0px 1px 0px #528ecc;
}
.myButton:hover {
background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
background-color:#378de5;
}
.myButton:active {
position:relative;
top:1px;
}
박스 안에 있는 CSS 코드 드래그가 잘 안 되시는 분들을 위해 아래에 별도로 작성해 두었으니
편리하게 사용하시면 됩니다.
.myButton {
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
background-color:#79bbff;
border-radius:17px;
border:3px solid #84bbf3;
display:inline-block;
cursor:pointer;
color:#ffffff!important;
font-family:Arial;
font-size:20px;
font-weight:bold;
padding:6px 64px;
text-decoration:none;
text-shadow:0px 1px 0px #528ecc;
}
.myButton:hover {
background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
background-color:#378de5;
}
.myButton:active {
position:relative;
top:1px;
}
복사하기는 다 되었구요.
이제 CSS 코드를 적용하기 위해 설명을 보러 가야 합니다.