HTML 버튼 테두리 만들기 - HTML beoteun teduli mandeulgi

CSS, HTML

반응형

위의 gif와 같은 버튼을 만들어 보겠습니다.

See the Pen rotateBorderButton by myhappyman (@myhappyman) on CodePen.

반응형

저작자표시 비영리 변경금지

'WEB > HTML,CSS' 카테고리의 다른 글

NAME

PASSWORD

HOMEPAGE

SECRET

Powered by Tistory, Designed by wallel

Rss Feed and Twitter, Facebook, Youtube, Google+

안녕하세요

가운데 정렬로 항상 글을 써내려 갔었는데 아무래도.. 좌측 정렬이 가장 깔끔한거 같습니다

오늘은 HTML의 버튼에 관해서 알아보겠습니다

<button></button> 으로 사용이 되고 있습니다

버튼이란??

버튼을 사용함으로써

클릭이 가능하게 하고 간단한 표준 버튼 기능이 필요한 곳이라면

어디에나 배치할 수 있다는 장점이 있습니다

기본적인 버튼의 모양은 이쁘지 않지만

CSS를 통하여 디테일하게 모양을 바꿀 수 있습니다

기본 적으로 특성을 좀 알려드리겠습니다

<button class="button_1" disabled></button>

위 와 같이 클래스 이름 뒤에 빨간색에 추가하여 사용 할 수 있습니다

기본 적으로 버튼은 어떠한 행동을 취할때 하기 때문에

간단한 페이지를 넘어가는 버튼은 <a> 태그로 대신 하기도 합니다

기본 버튼의 모양입니다

참 재미없게 생겼지 않나요??

여기에 CSS를 첨가해서 이것보다는 좀 더 이쁘게 만들어 보도록 하겠습니다

버튼에서 자주 사용할 수 있는 CSS들을 소개 해드리겠습니다

CSS 소개

자세한 설명

border

  -- 기본 버튼을 다시 보고 오시면 검은색 테두리가 있는것이 보입니다

      사실상 너무 거슬리기 때문에 border : 0; 을 주어서 테두리를 없애줍니다

outline

  -- 버튼을 클릭하면 제 컴퓨터 기준으로는 보라색 테두리가 씌워지게 됩니다

     이것 역시 제가 원하던 값들이 아니기 때문에 outline : none; 을 주어서 없애줍니다

cursor

  -- 버튼에 마우스를 기본 버튼을 만들어 보셨다면 마우스를 한번 올려보세요

      아무런 뭐 이게 버튼인지 그림인지 알 수가 없습니다

      보기 쉽게 하기 위하여 cursor : pointer; 값을 주어서 올리면 아!! 이게 클릭할 수 있는 버튼이구나를 알 수있게 해줍니다

border-radius

  -- 직사각형의 네모난 모양이 싫다!! 하실때

      이것을 사용하시면 됩니다

      border-radius : 0px 1px 2px 3px;

      이렇게 총 4번을 선택 할 수 있습니다

      번호 순대로 줄어들게 되며,

      전체 다 똑같은 픽셀로 주고 싶다!! 하시면

      border-radius : 30px;

      이렇게 주시면 전체 같은 값으로 주실 수 있습니다

      오른쪽 그림이 설명이 잘 된건지 모르겠습니다 ㅜㅜ

이 정도면 이제 버튼을 간단하게 이쁘게 꾸밀 수 있는 준비는 마치게 되었습니다

간단한 버튼에 관한 소개 였구요, 아래 코드를 남기겠습니다

한 번씩 테스트하시면서 다르게도 해보고 하시면 좋을 것 같습니다

제가 올려둔 코드들은 정말 간단한 버튼들의 모양이구요

<a> 태그에도 동일하게 적용하실 수 있으니 한번씩 연습해보시는 것도 좋을것 같습니다

See the Pen YzqZJKa by Kang Byeongcheol (@Devcheol) on CodePen.

언제나 더 좋은 코드 또한 궁금한 사항들이 있으시면 댓글 남겨주세요

함께 공부하면 좋을것 같습니다

좋아요 한번씩 누르고 가주시면 감사하겠습니다