CSS Button

color

글씨 색을 설정한다.

CSS

#my-button{
    color:#ff0000;
}

background-color

요소 배경색을 설정한다.

CSS

#my-button{
    background-color: #ff33ff;
}

border-style

요소 테두리 스타일을 설정한다.
dotted / dashed / solid / double / groove / redge / inset / outset / none / hidden

CSS

#my-button{
    border-style: dashed;
}

border-width

요소 테두리 두께를 설정한다.

CSS

#my-button{
    border-style: solid;
    border-width: 10px;
}

border-color

요소 테두리 색깔를 설정한다.

CSS

#my-button{
    border-style: solid;
    border-width: 10px;
    border-color: #ff00ff;
}

border-radius

요소 테두리에 둥근 모서리를 설정한다.

CSS

#my-button{
    /* border 관련속성은 묶어 쓸 수 있다 */
    border: solid 10px #ff00ff;
    border-radius: 20px;
}

padding

요소 안쪽에 여백을 설정한다.

CSS

#my-button{
    /* border 관련속성은 묶어 쓸 수 있다 */
    border: solid 1px #000000;
    padding: 20px;
}

CSS

#my-button{
    border: solid 1px #000000;
    /* padding 속성값을 2개주면 상하 좌우로 적용할 수 있다 */
    padding: 20px 40px;
}

CSS

#my-button{
    border: solid 1px #000000;
    /* padding 속성값을 4개주면 위 오른쪽 아래 왼쪽 순서로 적용할 수 있다 */
    padding: 20px 5px 10px 50px;
}

width, height

요소의 가로, 세로 폭을 설정한다.

CSS

#my-button{
    border: solid 1px #000000;
    width: 150px;
    height: 200px;
}

box-shadow

요소에 그림자를 설정한다

CSS

#my-button{
    border: solid 1px #000000;
    background-color: white;
    padding:20px;
    
    /* box-shadow: x축 y축 색깔; */
    box-shadow: 10px 10px #000000;
}

그림자의 흐림 정도를 조절할 수 있다.

CSS

#my-button{
    border: solid 1px #000000;
    background-color: white;
    padding:20px;
    
    /* box-shadow: x축 y축 흐림 색깔; */
    box-shadow: 10px 10px 10px #000000;
}

background-image

요소에 배경이미지를 설정한다.

CSS

#my-button{
    padding: 20px;
    /* background-image: url( '이미지경로' ); */
    background-image:url( ' pattern1.gif ' );
}

transform: translate()

요소를 원래 위치에서 이동시킨다.

CSS

#my-button{
    border: solid 1px #000000;
    padding: 20px;
    transform: translate(50px, 100px);
}

transform: rotate()

요소를 회전 시킨다.

CSS

#my-button{
    border: solid 1px #000000;
    padding: 20px;
    transform: rotate(30deg);
}

transform: skewX() skewY()

요소를 기울인다.

CSS

#my-button{
    border: solid 1px #000000;
    padding: 20px;
    transform: skewX(30deg);
}

CSS

#my-button{
    border: solid 1px #000000;
    padding: 20px;
    transform: skewY(30deg);
}

transform: scale()

요소를 크기를 키우거나 줄인다.

CSS

#my-button{
    border: solid 1px #000000;
    padding: 20px;
    /* transform: scale(배율); */
    transform: scale(3);
}

transform

transform 안의 여러 속성값을 함께 쓸 수 있다.

CSS

#my-button{
    border: solid 1px #000000;
    padding: 20px;
    transform: scale(3) rotate(-60deg) skewY(30deg);
}

cursor

요소에 커서가 닿았을 때 모양을 설정한다

CSS

#my-button{
    border: solid 1px #000000;
    padding: 20px;
    cursor: pointer;
}

#my-button:hover{
    background-color:green;
}

선택자 : hover

요소에 마우스를 올렸을 때의 상태를 설정한다.

CSS

#my-button{
    border: solid 1px #000000;
    padding: 20px;
}

#my-button:hover{
    background-color:#000000;
    color:#ffffff;
}

선택자 : active

요소를 마우스로 눌렀을 때 상태를 설정한다.

CSS

#my-button{
    border: solid 1px #000000;
    padding: 20px;
}

#my-button:hover{
    background-color:#000000;
    color:#ffffff;
}

#my-button:active{
    background-color:#ff00ff;
}

transition

상태가 변할때 부드럽게 연결되어 적용되도록 한다/

CSS

#my-button{
    border: solid 1px #000000;
    padding: 20px;
    
    /* transition: 적용속성 진행시간 속도변화; */
    transition: all 0.5s linear;
}

#my-button:hover{
    background-color:#000000;
    color:#ffffff;
    transition: all 0.5s linear;
}

#my-button:active{
    background-color:#ff00ff;
    transition: all 0.5s linear;
}

CSS

#my-button{
    border: solid 3px #000000;
    border-radius:20px;
    padding: 20px;
    cursor:pointer;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
    
    /* transition: 적용속성 진행시간 속도변화; */
    transition: all 0.3s ease-in-out;
}

#my-button:hover{
    box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
    transition: all 0.3s ease-in-out;
}

#my-button:active{
    background-color:#ddd;
    box-shadow: 0 0 rgba(0,0,0,0.5);
    transition: all 0.3s ease-in-out;
}

font-size

폰트 사이즈를 설정한다

CSS

#my-button{
    border: solid 1px #000000;
    padding: 20px;
    font-size:30px;
}

font-weight

폰트 두께를 설정한다.
normal / bold / bolder / lighter / number(100~900)

CSS

#my-button{
    border: solid 1px #000000;
    padding: 20px;
    font-weight:bold;
}

font-family

폰트 종류를 설정한다. 원하는 폰트를 설정하기위해선 미리 불러와야한다.
구글 폰트에서 영문 폰트를 제공받을 수 있다. https://fonts.google.com/

CSS

/* CSS 최상단에 폰트를 import 한다. */
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');

#my-button{
    border: solid 1px #000000;
    padding: 20px;
    font-size:30px;
    font-family: 'Permanent Marker', cursive;
}

No Style