예쁜 버튼 만들기 CSS

예쁜 버튼이 필요하신가요? 그렇다면 CSS를 사용하면 예쁜 버튼을 만들 수 있습니다.

위 버튼을 한번 만들어보려고 하는데요, 먼저 버튼 코드를 만들어줍시다.

버튼 코드 

<button class="button">여기를 클릭해주세요!</button>

 

이대로는 그냥 버튼이 만들어지는데요, 이제 CSS를 이용하여 예쁜 버튼 디자인을 해보겠습니다!!

반응형

버튼 코드 CSS

.button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  border-radius: 50px;
  border: 2px solid #3f51b5;
  background-color: #3f51b5;
  color: white;
  transition: all 0.2s ease-in-out;
}

.button:hover {
  background-color: white;
  color: #3f51b5;
  border: 2px solid #3f51b5;
  cursor: pointer;
}

padding은 버튼 안쪽에 여백을 지정합니다. 여기서는 상하좌우 각각 10px, 20px로 지정했습니다.

text-align은 버튼 내부의 글자 정렬을 지정할 수 있습니다. center로 하여 텍스트를 중앙에 정렬합니다.

transition: all은 전체에 전환효과를 주는 것으로 0.2초동안 시작과 종료 부분이 천천히 진행됩니다.

 

.button:hover은 마우스를 버튼 위로 올렸을 때의 스타일 속성을 지정합니다.

cursor: pointer; 이 스타일은 마우스가 버튼 위에 올라갔을 때 커서 모양을 포인터(손가락)으로 지정합니다.

 

예쁜 버튼 만들기 참 쉽죠?

예제 파일을 올려놓았으니 다운로드 받아서 자유롭게 사용하세요!!

button.html

0.00MB