티스토리 뷰

공부

[CSS] button animation

seunggabi 승가비 2020. 5. 3. 16:16
<style>
.btn {
    display: block;
    width: 200px;
    height: 40px;
    line-height: 40px;
    border: 1px #3399dd solid;
    ;
    margin: 15px auto;
    background-color: #66aaff;
    text-align: center;
    cursor: pointer;
    color: #333;
    transition: all 0.9s, color 0.3s;
}

.btn:hover {
    color: #fff;
}

.hover1:hover {
    box-shadow: 200px 0 0 0 rgba(0, 0, 0, 0.5) inset;
}

.hover2:hover {
    box-shadow: -200px 0 0 0 rgba(0, 0, 0, 0.5) inset;
}

.hover3:hover {
    box-shadow: 0 80px 0 0 
    rgba(0, 0, 0, 0.25) inset, 0 -80px 0 0 rgba(0, 0, 0, 0.25) inset;
}

.hover4:hover {
    box-shadow: 200px 0 0 0 rgba(0, 0, 0, 0.25) inset, -200px 0 0 0 rgba(0, 0, 0, 0.25) inset;
}
</style>
<div>
    <button class="btn hover1"> BUTTON 1 </button> <button class="btn hover2"> BUTTON 2 </button> <button class="btn hover3"> BUTTON 3 </button> <button class="btn hover4"> BUTTON 4 </button>
</div>

https://blog.stories.pe.kr/176

 

CSS로 그럴듯한 버튼효과를 내보자

별도의 라이브러리를 사용하지 않고 순수하게 CSS3만을 활용하여 버튼의 효과를 줄 수 있습니다. 급하게 퍼블리싱할때 써먹을 수 있게 정리해 놓겠습니다. 미리보기 BUTTON 1 BUTTON 2 BUTTON 3 BUTTON 4 ��

blog.stories.pe.kr

 

'공부' 카테고리의 다른 글

[Spring] Class path contains multiple SLF4J bindings, exclusion library  (0) 2020.05.14
[Spring] logback.xml use spring property  (0) 2020.05.14
[CSS] button animation  (0) 2020.05.03
[Python] lambda  (0) 2020.05.02
[Spark] subquery  (0) 2020.05.02
[Maven] basic  (0) 2020.05.02
댓글
댓글쓰기 폼