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 이렇게 써준다고 한다.