신규 블로그를 만들었습니다!

2020년 이후부터는 아래 블로그에서 활동합니다.

댓글로 질문 주셔도 확인하기 어려울 수 있습니다.

>> https://bluemiv.tistory.com/

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

 

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기