테스트 사이트 - 개발 중인 베타 버전입니다

호버 블 버튼

· 8년 전 · 1587

호버 블 버튼



 


:hover선택 도구 위로 마우스를 가져 가면 선택기를 사용하여 단추의 스타일을 변경합니다.


팁 :transition-duration 속성을 사용하여 "마우스 오버"효과의 속도를 결정합니다.


.button {

    -webkit-transition-duration: 0.4s; /* Safari */

    transition-duration: 0.4s;

}


.button:hover {

    background-color: #4CAF50; /* Green */

    color: white;

}



[전체소스]

<!DOCTYPE html>

<html>

<head>

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: none;

    color: white;

    padding: 16px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    -webkit-transition-duration: 0.4s; /* Safari */

    transition-duration: 0.4s;

    cursor: pointer;

}


.button1 {

    background-color: white; 

    color: black; 

    border: 2px solid #4CAF50;

}


.button1:hover {

    background-color: #4CAF50;

    color: white;

}


.button2 {

    background-color: white; 

    color: black; 

    border: 2px solid #008CBA;

}


.button2:hover {

    background-color: #008CBA;

    color: white;

}


.button3 {

    background-color: white; 

    color: black; 

    border: 2px solid #f44336;

}


.button3:hover {

    background-color: #f44336;

    color: white;

}


.button4 {

    background-color: white;

    color: black;

    border: 2px solid #e7e7e7;

}


.button4:hover {background-color: #e7e7e7;}


.button5 {

    background-color: white;

    color: black;

    border: 2px solid #555555;

}


.button5:hover {

    background-color: #555555;

    color: white;

}

</style>

</head>

<body>


<h2>Hoverable Buttons</h2>

<p>Use the :hover selector to change the style of the button when you move the mouse over it.</p>

<p><strong>Tip:</strong> Use the transition-duration property to determine the speed of the "hover" effect:</p>


<button class="button button1">Green</button>

<button class="button button2">Blue</button>

<button class="button button3">Red</button>

<button class="button button4">Gray</button>

<button class="button button5">Black</button>


</body>

</html>


 

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
3530
3529
3497
3472
3471
3451
3442
3441
3437
3436
3425
3421
3420
3405
3402
3399
3397
3394
3393
3392
3391
3390
3389
3388
3387
3386
3385
3384
3383
3382