Language/HTML, CSS

CSS. Basic Button Styling

out of coding 2018. 3. 2. 12:29

간단하게 CSS로 Button의 Style을 수정하는 방법입니다.


1
2
3
4
5
6
7
8
9
10
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
cs


간단하게 이런 정도의 정의를 내릴수 있습니다.


1
2
3
4
5
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
cs


그래서 이러한 형태로 버튼의 타입을 정의한 이후에 정해진 타입을 사용하면 되겠죠?


웬지 느낌이 안드로이드 xml 작성하던 것이랑 너무 같아서 친근함이 있고 재미도 있네요.

하나만 해야하는데 이것저것 하는게 너무 좋아서...