HTML CSS만 사용하여 멋진 버튼 호버 효과 만들기

3510 단어 webdevcsshovertutorial
안녕하세요 여러분. 오늘 나는 이것을하는 방법을 배울 것입니다 :

다음 중 하나만 필요합니다.



HTML 파일에서 "btn"(또는 원하는 이름)이라는 클래스가 있는 버튼을 만듭니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Awesome Button Hover Effect</title>
</head>
<body>
    <button class="btn">Hover me</button>
</body>
</html>


HTML이 포함된 링크 CSS 파일을 잊지 마세요(head 태그에 있음).

<link rel="stylesheet" href="style.css">


CSS 파일에서:
  • 먼저 기본 스타일을 제거해야 합니다.

    • *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


  • 배경과 가운데 버튼을 편집해야 합니다.

    • body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: rgb(8, 8, 8);
}


  • 그런 다음 버튼의 CSS를 편집해야 합니다(먼저 마우스를 올리지 않음).

    • :root {
    --main-color: rgb(180, 255, 68);
}

.btn {
    position: relative;
    padding: 12px 35px;
    border: 3px solid var(--main-color);
    border-radius: 0;
    font-size: 17px;
    background: none;
    color: var(--main-color);
    font-family: sans-serif;
}



  • 버튼에 대한 이전 요소 만들기:

    • .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    width: 100%;
    height: 100%;
    background-color: var(--main-color);
}


  • 그런 다음 호버 효과를 만들어야 합니다. 이전 요소 translateY는 마우스를 올리면 0이 됩니다.

    • .btn:hover {
    color: rgb(0, 0, 1);
}

.btn:hover::before {
    z-index: -10;
    transform: translateY(0);
}


  • 그런 다음 호버에서만 요소 앞에 나타나야 하므로 버튼에 숨겨진 오버플로를 추가합니다.

    • .btn {
   overflow: hidden;
}


  • 다음으로 할 일은 전환을 만드는 것입니다.

    • .btn {
    transition: 0.5s linear;
}

.btn:hover {
    transition: 0.5s linear;
}

.btn::before {
    transition: 0.5s linear;
}

.btn:hover::before {
    transition: 0.5s linear;
}


  • 다음으로 할 일은 호버에 그림자를 만드는 것입니다.

    • .btn:hover {
   filter: drop-shadow(0 0 50px var(--main-color));
}


  • 마지막 단계는 RGB 컬러 애니메이션을 만드는 것입니다.

    • @keyframes animate {
    0% {
        filter: drop-shadow(0 0 50px var(--main-color)) hue-rotate(0deg);
    } 100% {
        filter: drop-shadow(0 0 50px var(--main-color)) hue-rotate(360deg);
    }
}

.btn {
    animation: animate 3s linear infinite;
}
    Hotwire + Tailwind: 자바스크립트가 없는 스피너
    .NET/Angular 프로젝트용 VS 코드 구성

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage