신규 블로그를 만들었습니다!
CSS 버튼 예쁘게 만들기
WEB 개발을 하다보면 버튼은 자주 사용하게 됩니다. 이건 제가 자주 사용하는 방법인데, 버튼을 좀 더 예쁘게(?) 표현할때 많이 사용합니다. 결과물부터 확인해보면 아래 사진과 같습니다.
기본 상태일때...
마우스를 올렸을때...
지금부터 어떻게 만드는지 알아보도록 하겠습니다.
버튼 생성
<html>
<head>
<title>Button Test</title>
</head>
<body>
<div id="btn_group">
<button id="test_btn1">테스트1</button>
<button id="test_btn2">테스트2</button>
</div>
</body>
</html>
일단 2개의 버튼을 만듭니다.
이제 스타일을 입혀봅시다.
버튼 사이 간격 없애기
일단 2개의 버튼사이에 간격이 보이는데 이쁘지 않기 때문에, margin을 이용해서 없애보도록 하겠습니다.
왼쪽 버튼은 오른쪽 마진값(margin-rihgt)을 음수를 넣어줍니다. 반대로 오른쪽 버튼의 경우는 왼쪽 마진값(left-margin)에 음수를 넣어줍니다. 값은 적당히 잘 넣어주세요... 이뻐보이게!
<html>
<head>
<title>Button Test</title>
<style>
#test_btn1{
margin-right:-4px;
}
#test_btn2{
margin-left:-3px;
}
</style>
</head>
<body>
<div id="btn_group">
<button id="test_btn1">테스트1</button>
<button id="test_btn2">테스트2</button>
</div>
</body>
</html>
버튼 사이의 간격이 사라졌습니다. 그 다음은 칙칙한 회색에 각져있는 버튼의 스타일을 변경해보도록 합시다.
버튼 배경색상과 글씨 색상 바꾸기
<html>
<head>
<title>Button Test</title>
<style>
#test_btn1{
margin-right:-4px;
}
#test_btn2{
margin-left:-3px;
}
#btn_group button{
border: 1px solid skyblue;
background-color: rgba(0,0,0,0);
color: skyblue;
padding: 5px;
}
</style>
</head>
<body>
<div id="btn_group">
<button id="test_btn1">테스트1</button>
<button id="test_btn2">테스트2</button>
</div>
</body>
</html>글씨 색상은 마음에 드는 색상으로 하시면 됩니다. 저는 예제로 만드는거라 skyblue 색상으로 하겠습니다.
조금씩 버튼이 예뻐지고 있습니다. 이렇게 끝내기는 아쉽기 때문에, 버튼 모서리를 둥글게 표현하도록 해봅시다.
모서리 둥글게 만들기
<html>
<head>
<title>Button Test</title>
<style>
#test_btn1{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
margin-right:-4px;
}
#test_btn2{
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
margin-left:-3px;
}
#btn_group button{
border: 1px solid skyblue;
background-color: rgba(0,0,0,0);
color: skyblue;
padding: 5px;
}
</style>
</head>
<body>
<div id="btn_group">
<button id="test_btn1">테스트1</button>
<button id="test_btn2">테스트2</button>
</div>
</body>
</html>
border-radius 속성을 이용합니다. 이 속성을 이용하면, 모서리를 둥글게 만들 수 있습니다. 하지만, 저는 왼쪽버튼은 왼쪽 모서리만, 오른쪽 버튼은 오른쪽 모서리만 둥글게 하고 싶기 때문에 border-top-left-radius, border-bottom-left-radius, border-top-right-radius, border-bottom-right-radius를 이용합니다.
이제 거의다 왔습니다. 마지막으로 버튼의 생명을 넣어주기 위해 hover 속성을 넣어줍니다.
hover 넣어주기
<html>
<head>
<title>Button Test</title>
<style>
#test_btn1{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
margin-right:-4px;
}
#test_btn2{
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
margin-left:-3px;
}
#btn_group button{
border: 1px solid skyblue;
background-color: rgba(0,0,0,0);
color: skyblue;
padding: 5px;
}
#btn_group button:hover{
color:white;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="btn_group">
<button id="test_btn1">테스트1</button>
<button id="test_btn2">테스트2</button>
</div>
</body>
</html>
겉모습은 같을테지만, 마우스를 올리면 배경색이 채워지고 글씨는 하얗게 변하는 것을 확인 할 수 있습니다.
아래에 본글에서 사용한 css 속성을 정리했습니다.
사용한 속성
버튼 테두리 둥글게 만들기 위한 속성
border-top-left-radius
border-bottom-left-radius
border-top-right-radius
border-bottom-right-radius
테두리 스타일을 입히기 위한 속성
border
버튼 배경색상을 입히기 위한 속성
background-color
버튼 글씨 색상을 입히기 위한 속성
color
간격을 조절하기 위한 속성
padding
margin-left
margin-right
---------- 2021.01.03 글 수정 -----------
예의없는 행동은 삼가해주세요 ^^
"니눈엔??" 제가 님 친구인가요~? 예의 바르게 행동해주세요.
수정하셔도 수정 내역이 남으니깐 조심히 행동해주시구요 ^^
다른 글 보러가기
2018/09/19 - [Language/Python] - Python :: 파이썬 튜플(Tuple) 자료형 개념과 사용방법
Python :: 파이썬 튜플(Tuple) 자료형 개념과 사용방법
튜플 Tuple 튜플은 리스트와 거의 비슷합니다. 차이가 있다면 자료형을 선언할때 (, ) 소괄호를 사용한다는 점 입니다. 그리고 값을 추가, 수정, 삭제가 불가능하다는 것입니다. 이런 특징을 immutable(이뮤터블)..
hongku.tistory.com
2018/09/27 - [Language/Python] - Python :: 파이썬3 requests 모듈 살펴보기(설치, 사용방법 및 예제)
Python :: 파이썬3 requests 모듈 살펴보기(설치, 사용방법 및 예제)
Python3 requests 모듈 API를 사용할 때, 주로 사용하곤 하는 requests 모듈에 대해 살펴보려 합니다. 사용하는 방법은 매우 쉽습니다. 사용을 할때는 보통 HTTP 메소드(method, 또는 함수)의 GET 과 POST를 사용..
hongku.tistory.com
2018/10/03 - [Language/Python] - Python :: 파이썬 딕셔너리(Dictionary) 사전 개념 및 사용방법
Python :: 파이썬 딕셔너리(Dictionary) 사전 개념 및 사용방법
딕셔너리 앞에서 리스트와 튜플을 알아보았습니다. 그 밖에도 파이썬에는 딕셔너리(Dictionary)라는 자료형이 있습니다. 파이썬 사전 자료형을 이용하면 가독성을 높일 수 있다는 장점이 있습니다. 무슨 소리냐..
hongku.tistory.com
2018/07/11 - [WEB/JS&jQuery] - jQuery :: 제이쿼리를 이용하여 비밀번호 값 비교하기 (키보드 눌렀을때 비교)
jQuery :: 제이쿼리를 이용하여 비밀번호 값 비교하기 (키보드 눌렀을때 비교)
비밀번호 값 비교하기 회원가입을 할때, 비밀번호를 잘못치는경우가 있을 수 있다. 그래서 보통 비밀번호를 2번 입력하여 그 값이 일치하는지 확인한다. jQuery(제이쿼리)를 이용해서
태그의 비밀번호 값 2..
hongku.tistory.com
2018/07/11 - [WEB/JS&jQuery] - js :: Daum Kakao 주소 API 이용하기 (웹 개발 회원가입)
js :: Daum Kakao 주소 API 이용하기 (웹 개발 회원가입)
다음 카카오 주소 API 주소 api를 사용하기 위해서 kakao developer에서 API 키 값을 받아야 한다. (링크 https://developers.kakao.com/) 가입 및 로그인을 하고 나서 애플리케이션을 생성하면 API 키값을 발급해..
hongku.tistory.com
2018/05/30 - [Cloud/AWS] - AWS :: 아마존 EC2 서버에 MySQL 설치하기
AWS :: 아마존 EC2 서버에 MySQL 설치하기
AWS EC2 서버에 MySQL 설치하기 MySQL을 다운받는다. $ sudo yum install mysql56-server 설치가 완료되었는지 확인 할 겸, 다운받은 mysql의 버전을 확인해본다. $ mysql -V MySQL 서버를 실행한다. $ sudo ser..
hongku.tistory.com
2018/06/05 - [Language/C&C++] - C/C++ :: 3X3 퍼즐 게임 프로그램 만들기(코드 구현)
C/C++ :: 3X3 퍼즐 게임 프로그램 만들기(코드 구현)
3x3 퍼즐 게임 어렸을 적 한번쯤은 해봤을 퍼즐 게임입니다. 해당 글에서는 3x3 크기의 퍼즐을 만들어 봅니다. 처음에는 맨 하단 우측(좌표 2, 2)에서 시작합니다. 키보드를 이용하여 현재위치를 바꿈과 동시에..
hongku.tistory.com
'WEB > HTML&CSS' 카테고리의 다른 글
| CSS의 기본정리. 반드시 알아야하는 CSS 내용 (0) | 2019.03.19 |
|---|---|
| HTML 오디오 태그 (Audio, iframe) 음악 자동재생 (3) | 2019.03.18 |
| HTML에서 이미지 가져오기 (img 태그) (1) | 2019.03.17 |
| HTML 테이블 사용방법 (table) (0) | 2019.03.16 |
| HTML에서 리스트 사용방법(ol, ul, li) (0) | 2019.03.15 |
최근댓글