css3 로 아주 멋진 버튼을 만드는 글을 보아 소개합니다.
html5 와 css3 의 합작품이지만 css3 만 적용을해도 잘 보입니다.
먼저 멋진 예제 화면을 보시죠.
코너가 약간 둥근형태로 보여지는 버튼이며 이미지를 사용하지 않고 단지 css 코드로만 이렇게 멋진 버튼들이 완성이 된것입니다.
원문 페이지와 데모보기 페이지를 버튼형태로 한번 만들어 봤습니다. 아래를 클릭해서 보세요.
원문보기 demo 보기
사용방법은 원문페이지에 잘 설명이 되어 있습니다. 영어이다보니 초보자분들은 모를수 있으니 추가 설명 들어갑니다.
기본방법은 원문페이지와 같습니다.
HTML 마크업은 아래처럼 아주 간단합니다.
.
.
html 은 위처럼 클래스가 내용과 똑같습니다.
css 설정은 아래와 같습니다. 코드가 길어 더보기를 사용합니다.
여기까지의 내용은 원문에 나와 있는겁니다.
저의 경우 스킨(Bangtanwep)에서 설정한 스타일이 버튼에 상속이 되서 영향을 미칩니다. 이점을 수정합니다.(Bangtanwep[2단스킨])
한글을 사용할경우를 대비해서 나눔고딕과 맑은고딕, 돋음을 추가 설정합니다.
활용도를 위해 버튼의 스타일을 따로 분리했습니다. 나중에라도 지울수 있으니까요.
아래 수정한 스타일
이제 스킨편집에서 위의 파일을 업로드 합니다.
그다음 아래의 한줄을 </head>위에 추가해줘야겠지요.
여기까지 한 내용이 위에서 잠깐 사용한 버튼의 모습입니다.
html5 와 css3 의 합작품이지만 css3 만 적용을해도 잘 보입니다.
먼저 멋진 예제 화면을 보시죠.
코너가 약간 둥근형태로 보여지는 버튼이며 이미지를 사용하지 않고 단지 css 코드로만 이렇게 멋진 버튼들이 완성이 된것입니다.
원문 페이지와 데모보기 페이지를 버튼형태로 한번 만들어 봤습니다. 아래를 클릭해서 보세요.
원문보기 demo 보기
사용법.
사용방법은 원문페이지에 잘 설명이 되어 있습니다. 영어이다보니 초보자분들은 모를수 있으니 추가 설명 들어갑니다.
기본방법은 원문페이지와 같습니다.
HTML 마크업은 아래처럼 아주 간단합니다.
.
<!-- 기본버튼 --> <a class="button" href="/">button</a> <!-- 왼쪽에 모양과 우측에 글씨, 클래스를 두개 지정 --> <a class="button add" href="/">Add</a> <a class="button edit" href="/">edit</a> <a class="button delete" href="/">Delete</a> <a class="button save" href="/">Save</a> <a class="button email" href="/">Send email</a> <a class="button like" href="/">Like</a> <a class="button next" href="/">Next</a> <a class="button star" href="/">Favourite</a> <a class="button spark" href="/">Spark</a> <a class="button play" href="/">Play</a> <!-- Social media buttons --> <a class="button tw" href="/">Follow me</a> <a class="button fb" href="/">Become a fan</a> <!-- Social media buttons --> <button class="button">Clean button</button> <button class="button save">Button with icon</button> <button class="button" disabled="">Disabled button</button> <button class="button save" disabled="">Another disabled button</button> <input class="button" type="submit" value="Input submit"> <input class="button" type="button" value="Input button"> <input class="button" type="submit" disabled="" value="Input submit disabled"> <input class="button" type="button" disabled="" value="Input button disabled">
html 은 위처럼 클래스가 내용과 똑같습니다.
css 설정은 아래와 같습니다. 코드가 길어 더보기를 사용합니다.
여기까지의 내용은 원문에 나와 있는겁니다.
또한 자바스크립트를 사용하지 않고 순수하게 css 코드만 사용해서 크로스 브라우징에는 약간 문제가 있습니다. 그렇다고 전혀 볼 수 없다는 것은 아닙니다. 완전하게 보이지 않는다는것 뿐이죠.
역시 익스플로러만 둥근형태와 pseudo-element 를 지원하지 않아 똑같이 보이지는 않습니다.
여기서 살짝 활용해봅니다. 역시 익스플로러만 둥근형태와 pseudo-element 를 지원하지 않아 똑같이 보이지는 않습니다.
저의 경우 스킨(Bangtanwep)에서 설정한 스타일이 버튼에 상속이 되서 영향을 미칩니다. 이점을 수정합니다.(Bangtanwep[2단스킨])
한글을 사용할경우를 대비해서 나눔고딕과 맑은고딕, 돋음을 추가 설정합니다.
활용도를 위해 버튼의 스타일을 따로 분리했습니다. 나중에라도 지울수 있으니까요.
아래 수정한 스타일
button.css이제 스킨편집에서 위의 파일을 업로드 합니다.
그다음 아래의 한줄을 </head>위에 추가해줘야겠지요.
<link rel="stylesheet" type="text/css" href="./images/button.css" media="screen" />
여기까지 한 내용이 위에서 잠깐 사용한 버튼의 모습입니다.
social