호버 블 버튼 > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

호버 블 버튼 정보

CSS 호버 블 버튼

본문

호버 블 버튼


91308e91ff090fb4abed793c1e3856ce_1504623982_5731.png
 


: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>

91308e91ff090fb4abed793c1e3856ce_1504624019_2978.png
 
추천
0

댓글 0개

전체 1,263
퍼블리셔팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT