개발나라 스용공주

[HTML/CSS] 애니메이션이 들어간 버튼 만들기 - 가상클래스 hover와 transition 본문

WEB/HTML & CSS

[HTML/CSS] 애니메이션이 들어간 버튼 만들기 - 가상클래스 hover와 transition

스용공주 2024. 10. 26. 04:19
728x90
728x90

이번 글은 애니메이션이 들어간 버튼을 만드는 과정을 설명하는 글이다.

 

 

 

[ html ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>포털사이트 버튼</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <a href="http://www.naver.com">네이버</a>
    <a href="http://www.google.com">구글</a>
</body>
</html>

 

[ css ]

a {
    padding : 5px;
    width : 100px;
    height : 30px;
    border : 1px solid black;
    border-radius: 10px;
    text-align : center;
    display : inline-block;
    text-decoration : none;
    color : black;
    transition: 0.5s;
}

a:hover {
    color : white;
    background-color: black;
}

 

a:hover는 <a>에 해당되는 부분에 마우스가 겹쳐지게 된다면 실행되는 코드다.

 

728x90
728x90

'WEB > HTML & CSS' 카테고리의 다른 글

[HTML/CSS] position 속성 사용 시 요소 중앙정렬하기 - transform과 translate  (0) 2024.11.01
[HTML/CSS] 순서를 만드는 가상클래스 nth-child(), nth-of-type()  (0) 2024.10.26
[HTML/CSS] float 속성의 이론 상세 설명 - inline, block, overflow, clear  (0) 2024.10.23
[HTML/CSS] 글씨 그림자 레이어 만들기 / css로 글씨 꾸미기  (0) 2024.10.22
[HTML/CSS] 자식선택자와 자손선택자 차이점 이론 설명 / 부모요소와 자식요소  (0) 2024.10.22
'WEB/HTML & CSS' Related Articles more
Comments