Button Generator!! CSS 버튼 꾸며주는 사이트
Button Generator!! CSS 버튼 꾸며주는 사이트
|
html의 기본형 버튼은 회색에 투박하기 때문에 디자인의 통일성을 깨뜨리는 문제가 발생합니다. 버튼은 웹문서에서 상당히 많이 사용하게되며 이미지로 사용하기도 하지만 CSS를 이용하여 만들 계획이라면 버튼을 쉽게 만들어주는 사이트가 있습니다. |
|
|
|
|
|
① 미리 제작된 템플릿을 선택할 수 있습니다. ② 색상을 선택할 수 있고 디자인을 실시간으로 확인 할 수 있습니다. ③ 버튼의 세부적인 디자인을 변경 할 수 있습니다. |
|
원하는 형태의 버튼이 완성 되었다면 미리보기창의 버튼을 눌러줍니다. 그러면 우측의 설정부분이 CSS 코드로 변하는데 이걸 복사해주세요. |
|
티스토리의 HTML/CSS 편집에서 CSS부분에 붙여넣어주면 버튼에 대한 설정이 끝나요. 마지막으로 버튼에 적용해주기만 하면 되는데 저는 Class를 myButton으로 생성했으니 다음과 같이 적용 합니다. 예) <BUTTON onclick="location.href='#top'">맨위로</BUTTON> (기본형) 예) <Button class="myButton" onclick="location.href='#top'">맨위로</Button> (CSS적용) Button은 일반적으로 onclick과 함께 사용되며 본 블로그에서는 다루지 않았으니 <a>태그에 버튼 디자인을 적용해 봅니다. 저는 Class를 mylink로 생성했으니 다음과 같이 적용 합니다. 예) <a href="http://secretgd.tistory.com/201" target=_blank>링크</a> (기본형) 예) <a class="mylink" href="http://secretgd.tistory.com/201" target=_blank>링크</a> (CSS적용) |
< 샘플 >
