가로수길 피부과 클론코딩

1.버튼그라데이션

마우스를 올리면 왼쪽에서 오른쪽으로 색이 바뀌고 글자 색도 바뀌는 버튼 그라데이션 효과를 만들었다.

<style>
.intro-area .link-intro {
    display: inline-block;
    width: 200px;
    height: 50px;
    border: 2px solid #c2b093;
    border-radius: 50px;
    color: #c2b093;
    line-height: 50px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.intro-area .link-intro:hover {
    color: #fff;
    box-shadow: 500px 0 0 0 #c2b093 inset;
    background: #c2b093;
    transition: 2.5s;
}
</style>

먼저 기본 버튼을 만들고(.link-intro) 마우스를 올렸을 때 hover가상클래스를 주어 box-shadow, 트랜지션 효과를 준다. 이렇게만 해도 한쪽부터 색이 차는 버튼 그라데이션 효과를 만들 수 있지만 좀 흐느적거리는 느낌이라.. 조금 더 또렷한 효과를 원한다면 after가상요소를 이용하면 될 것 같다.

<style>
.intro-area .link-intro::after {
    content: '';
    position: absolute;
    line-height: 60px;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    z-index: 1;
    background: #c2b093;
    transition: all .8s;
}

.intro-area .link-intro:hover::after {
    width: 100%;
    z-index: -1;
}
</style>

위와 같이 가상요소로 꾸며 주면 마우스를 올리면 2.5초동안 배경색의 너비가 100%가 된다.

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

2.메뉴

메뉴가 열릴 때, 4개의 메뉴가 각자 하나씩 순서대로 내려오면서 나타나는 효과를 부여하는 동작에 gsap를 사용했다.

<script>
menu = gsap.fromTo('.header .gnb-pop .gnb-item',{ //gnb-item클래스 요소들이
opacity:0,//처음에는 투명도0,
yPercent:-20//y축으로 20퍼센트 위에 있다가
},{
opacity:1, //나중에는 투명도 1이 되고
stagger:0.4, //0.4초 간격으로
yPercent:0 //y축으로 0퍼센트(원래위치)위치로 돌아온다.
})
menu.paused();//동작 후 멈춤
</script>

버튼 동작 제이쿼리에 menu.restart();를 넣어주면 메뉴를 여는 동작을 하는 버튼실행이 될 때마다 다시 menu효과가 나타나게 된다.

3.체크박스, 모두 선택버튼

사전예약버튼을 누르면 나타나는 체크박스 및 체크박스 모두 선택 부분은 예전에 작성했던 내용을 참고하여 만들었다.
체크박스 만들기