transition, 버튼 box-shadow
transition이라는 새로운 css 애니메이션 효과?에 대해 공부했다.
.btn:link,
.btn:visited {
display: inline-block;
text-decoration: none;
font-size: 2rem;
padding: 1.6rem 3.2rem;
border-radius: 9px;
transition: background-color 1s;
}
.btn--full:link,
.btn--full:visited {
background-color: #e67e22;
color: #fff;
}
.btn--full:hover,
.btn--full:active {
background-color: #cf711f;
}
transition: change the valu of a certain property or multiple properties from one value to another one.
.btn--outline:link,
.btn--outline:visited {
background-color: #fff;
color: #555;
}
.btn--outline:hover,
.btn--outline:active {
background-color: #fdf2e9;
/* border: 3px solid #fff; */
/* Trick to add border inside */
box-shadow: inset 0 0 0 3px #fff;
}
border을 안에 넣는 트릭 저건 처음배웠다~~
저렇게 안하고 border로 했더니 막 버튼 위치가 달라지면서
이상해져서 저 트릭을 쓴거다!!!
.btn--full:link,
.btn--full:visited {
background-color: #e67e22;
color: #fff;
}
여기에 마진을 넣어서 버튼 사이 간격이 나게 해줄 수 있지만
이 버튼을 다른데 쓰려고 할때 마진이 적용되있으면 불편하니까
새로 마진을 적용하는 방법을 배웠다. helper class라고 부른다고 한다.
html에 버튼 클래스에 요렇게 margin-right-sm을 추가해준뒤,
<a href="#" class="btn btn--full margin-right-sm"
>Start eating well</a
>
css에
.margin-right-sm {
margin-right: 1.6rem !important;
}
helper class쓸때는 보통 !important 이렇게 써준다고 한다.
Author And Source
이 문제에 관하여(transition, 버튼 box-shadow), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@pouryourlove/transition-버튼-box-shadow저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)