[CSS | BootStrap] BootStrap Button box-shadow / 부트스트랩 반짝이는 버튼 만들기

Bootstrap 저장버튼에 반짝이는 효과를 넣고싶었다.

 

대부분의 search 결과들은 마우스를 올렸을때(hover)시, 빛나게 하는 효과들이 많은데, 백엔드를 주로 다루는 나로써는 해결하기가 어려웠다.

 

쉬운듯 어려운 fornt의 세계...

 

 

---

 

결과 및 코드

 

See the Pen Glowing Button by Ella (@Ella_develop_floor) on CodePen.

 

<!--bootstrap 연결 부분-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">


<div class="mt-3">
    <div class="text-center">
        <button class="btn btn-block glow-button btn-outline-success">저장</button>
        <button class="btn btn-outline-danger">이전</button>
        <button class="btn btn-outline-secondary">목록</button>
    </div>
</div>

 

해당 스타일을 적용 시키고 싶은 버튼의 class 속성 안에 glow-button 과 같은 class를 주어서 해당 클래스에만 css를 적용시켜주면 된다.

 

별도의 source나 다운로드 패키지는 설치하지 않고도 적용이 가능하다.

 

.glow-button {
    animation: glowing 1500ms infinite;
}

@keyframes glowing {
    0% {
        box-shadow: 0 0 5px #28a745;
    }

    50% {
        box-shadow: 0 0 15px #28a745;
    }

    100% {
        box-shadow: 0 0 5px #28a745;
    }
}

 

@keyFrames 를 이용해서 glowing 속성을 주고 그 속성을 css에 animation : glowing으로 적용해주었다.

 

색상은 자유롭게 변경해도 좋습니다:)