본문 바로가기
개발 일지/TIL

[ HTML ] CSS - Button

by CODESIGN 2022. 11. 2.

오늘 한 것


개인 소개 페이지 CSS 수정

개인 페이지 만들기

 

 

button


개인 페이지에 sticky 버튼을 구현해 보았다

 

기본 sticky 버튼 구현

.sticky {
  position: -webkit-sticky;
  position: fixed;
  top: 130px;
  left: 140px;
  padding: 10px 45px;
  background-color: transparent;
  border-radius: 30px;
  border: 5px solid rgba(246, 210, 125, 0.9);
  font-size: 15px;
}

.sticky a {
  color: rgb(74, 73, 73);
  text-decoration: none;
}

 

hover을 할 경우 버튼의 사이즈가 커지게 만들었다.

.sticky:hover {
  background-color: white;
  transform: scale(1.1);
  border: 5px solid rgba(255, 213, 130, 0.9);

}
 

 

 

결과


 

 

댓글