버튼 디자인 CSS - beoteun dijain CSS

CSS를 사용하여 버튼의 스타일을하는 방법에 대해 알아 봅니다.

기본 버튼 스타일링

예

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

»그것을 자신을 시도

버튼 색상

사용 background-color 버튼의 배경색을 변경하는 속성 :

예

.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */

»그것을 자신을 시도

버튼 크기

사용하는 font-size 버튼의 크기를 변경하는 속성 :

예

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

»그것을 자신을 시도

둥근 버튼

사용 border-radius 버튼에 둥근 모서리를 추가하는 속성을 :

예

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

»그것을 자신을 시도

컬러 버튼의 테두리

사용 border 버튼에 컬러 테두리를 추가하는 속성을 :

예

.button1 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
}
...

»그것을 자신을 시도

Hoverable 버튼

사용 :hover 당신이 그것을 위에 마우스를 이동할 때 버튼의 스타일을 변경하려면 선택합니다.

팁 : 사용하는 transition-duration 은 "호버"효과의 속도를 결정하는데 속성 :

예

.button {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}
...

»그것을 자신을 시도

그림자 버튼

사용 box-shadow 버튼에 그림자를 추가 할 속성을 :

예

.button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

»그것을 자신을 시도

장애인 버튼

사용 opacity 버튼에 투명도를 추가하는 속성을 (에 "장애인"모양을 만듭니다).

팁 : 추가 할 수 cursor 는 "아무 주차 기호"를 표시하지 것이다 "-수 없습니다"의 값을 가진 속성을 때 버튼을 통해 사용자가 마우스 :

예

.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

»그것을 자신을 시도

버튼 폭

기본적으로, 버튼의 크기 (넓이 콘텐츠 등)의 텍스트 콘텐츠에 의해 결정된다. 사용 width 버튼의 폭을 변경하는 속성 :

예

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}

»그것을 자신을 시도

버튼 그룹

버튼

여백을 제거하고 추가 float:left 버튼 그룹을 만들고 각 버튼 :

경계 버튼 그룹

버튼

사용 border 보더 버튼 그룹을 만들 속성을 :

예

.button {
    float: left;
    border: 1px solid green
}

»그것을 자신을 시도

애니메이션 버튼

티스토리는 사이드바에 페이스북 같은 기본적인 SNS 로고는 달 수 있는 편의 기능을 제공하고 있다. 그러나 사이드바가 아니라 포스팅 안이나 그 외의 여러 곳에 링크 버튼을 만듦으로써 방문자에게 다른 사이트로 쉽게 이동할 수 있는 버튼을 만들고 싶은 경우가 있을 수 있는데, 이때는 CSS 버튼을 만들면 된다. 나 같은 코딩 초보도 쉽게 만들 수 있다.

날짜 옆에 내 개인 소유의 트위터 버튼을 붙여 넣어보도록 하자. 

A useful tool for designing css buttons

Button generator is a free online tool that allows you to create cross browser css button styles.

www.bestcssbuttongenerator.com

위의 사이트로 접속한다.

오른쪽에서 폰트 크기와 배경, 글자 색깔 등을 직접 디자인 할 수 있는 여러 기능을 활용하여 내가 만들고 싶은 링크 버튼을 디자인하고, 화살표로 표시한 'Get Code'를 클릭한다. 

'Get Code'를 클릭하면 코드가 나온다. '<a href="#" ~~'에 있는 '#'에는 본인 소유의 트위터 주소를 입력한다. 이것은 HTML 편집기에 삽입하는 코드이고, 내가 빨간색으로 표시한 밑에 있는 박스는 CSS 편집기에 삽입하는 코드다. 먼저 HTML에 삽입하는 코드를 넣어주기로 한다.

포스팅 제목 옆에 트위터 버튼을 만들려면, HTML 편집기에서 그 위치를 찾아내야 하는데, 티스토리 북클럽 스킨의 기준으로는 <div class="post-cover">를 먼저 찾고, 위 사진에 보이는 위치에 집어넣으면 된다.

(위 사진에는 781행인데, 이것은 각자의 스킨마다 다르므로 행을 기준으로는 찾지 않는 게 좋다. 필자의 블로그는 여러 곳에서 커스텀을 했으므로 여러분의 위치와 다르다. 사진에 #으로 표시되었는데, 꼭 버튼을 클릭해서 이동할 URL 주소를 입력해야 이동한다) 

CSS 편집기에 들어가서 아까 카피한 두번째 코드를 맨 밑에 붙여 넣고 적용을 누르기만 하면 된다.

위와 같이 트위터 버튼이 만들어졌다. 

나 같은 경우에는 예전에 사용했었는데, 별로 활용성이 없어서 지금은 사용하지 않고 있다. 그런데, 언젠가는 활용할 가능성이 있을 거 같다. 꼭 트위터만이 아니라 자신의 두 번째 블로그, 자주 가는 사이트 등 같은 여러 가지 방향으로 응용할 수 있다. 간혹 링크버튼을 만들 필요가 생길 수 있는데, 그때는 이 사이트를 이용하면 된다. 코딩 초보도 쉽게 만들 수 있다.