CSS3 Button-스타일로 버튼만들기

 

인터넷 강국 대한민국은 정말 많은 웹사이트가 있습니다. 하지만 그만큼 전문성을 띠지 못하는 저품질 사이트도 굉장히 많죠. 웹표준에 어긋나는 부분 또 웹접근성에 어긋나는 부분을 지키지 않는 사이트들이 많습니다. 버튼같은 경우에는 사용자의 UI가 직관적으로 보여야 하기때문에 디자인된 이미지로 사용하여 링크로 거는 형태가 많았습니다.

한참 아이폰 4시절쯤에 IOS에서 사용한 반반 그라데이션컬러 버튼이 유행하기도 했지요.

지금 IOS에서도 버튼에는 단순하게 원컬러만 사용하고있습니다. 더욱 사용자들이 혼란을 일으키지 않고 심플하면서도 깔끔하기 때문입니다.

디자인도 트렌드가 있듯이 지금은 단순명료하게 깔끔하게 가는 디자인이 정답이라고 생각합니다.

이미지 버튼일경우 포토샵에서 디자인해야하고 컷팅해야하고 또 이미지를 브라우저에 로딩해야하고 버튼이 많을경우 그만큼 부하도 많이 걸리니 여러모로 불편한 이미지가 아닐수 없습니다.

아래 다른 css관련 내용들을 참조해서 css공부에 도움이 되실거에요!

2017.08.13 - [웹(IT) 정보/css] - CSS before&after 컨텐츠 앞뒤 삽입

2017.08.30 - [웹(IT) 정보/css] - CSS FONTS 폰트 글꼴 설정

CSS FONTS 폰트 글꼴 설정

CSS before&after 컨텐츠 앞뒤 삽입

 

 

방법 예제를 보겠습니다.

Button

-------------------------------

<a href="#">Button</a>

<button>Button</button>

<input type="botton" value="button">

모두 버튼으로 사용할 수 있는 html 태그입니다.

차이는 링크이냐 액션을 취할 버튼이냐 차이이지요. 스크립트에 사용하기도 하구요.

CSS가 없을때는 저게 버튼인지 텍스트인지 데이터입력박스인지 알수가 없습니다.

이제 다음과 같은 CSS를 넣으면 다음과 같이 버튼의 모습으로 탄생하게됩니다.

 

.button {

    width:100px;

    background-color: #f8585b;

    border: none;

    color:#fff;

    padding: 15px 0;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 15px;

    margin: 4px;

    cursor: pointer;

}

2017.08.03 - [웹(IT) 정보/css] - CSS3 Colors(RGBA) 컬러와투명도

CSS3 Colors(RGBA) 컬러와투명도

Button

각각의 버튼이 CSS만으로 아주 쉽게 만들어 졌습니다.

정말 쉬우면서도 html 소스도 가볍고 누구나 보기 쉽게 만들어졌습니다. border-radius를 통해서 각진 네모 버튼을 자연스럽게 보이게 할 수 있습니다.

border-radius:10px;

4곳 모두 10px의 코너가 생겼습니다. 그럼 여기서 궁금한건 어느 한부분만 줄수 없는건가요? 물론 원하는 곳에 지정하여 코너를 만들 수 있습니다.

border-radius:10px 10px 10px 10px; (↖ ↗ ↘ ↙) 의 순서입니다. 좌상 우상 우하 우좌 순입니다.

그렇다면 다음과 같은 이미지가 되려면?

border-radius:10px 0 10px 0; 과 같이 css를 입히면 됩니다.

.button:hover {
    background-color: blue;
}

:hover 를 이용하여 마우스 오버시 백그라운드 컬러변경도 아주 쉽습니다. transition을 이용하여 부드러운 백그라운드 컬러변경도 가능합니다. 물론 트랜지션의 다른속성들을 이용하여 여러가지 변형도 가능합니다. 트랜지션에 관한부분은 글작성 후 링크 수정하도록 하겠습니다.

다양한 css를 통하여 더욱 감각있고 재미있는 버튼을을 많이 만들 수 있습니다. 모두가 쉬운 디자인 코딩을 하면 좋겠습니다.

 

2017.08.10 - [웹(IT) 정보/css] - CSS3 Gradient 그라데이션효과

CSS3 Gradient 그라데이션효과