*{
    box-sizing: border-box;
    position: relative;
}

.section{
    height: 600px;
}
.section1{
    background-color: bisque;
}
.section2{
    background-color: coral;
}
.section3{
    background-color: cadetblue;
}
/* Transition功能操作 */
.box{
    width: 100px;
    height: 100px;
    background-color: rgb(255, 255, 255);
    /* 複習：position指令是以上一層物件為位置參照基準 */
    position: absolute;
    left: 50%;
    top: 50%;
    /* 複習：transform translate設定是以原物件為基準
    設定x y軸負數是因為希望物件往左移 */
    transform: translate(-50%,-50%);
    border-radius: 50%;
    /* 轉場漸變效果：注意寫在物件裡跟hover 結果不一樣，後者的轉場比較生硬
    以下寫法一種為形狀秒數個別調整，一個為一次性調整 */
    /* transition:width 1s,height 1s,border-radius 2s; */
    transition: all 1s;

}
/*互動特效*/
/* 注意如果寫法是.box:hover，滑鼠離開方體，大小會回復原狀
如果寫法是將box包在 section裏面做hover，滑鼠移致下一欄，大小才會回覆原狀 */
.section1:hover .box{
    width: 100%;
    height: 100%;
    /* 放大後取消圓角 */
    border-radius: 0%;
}

.inner{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.btn1{
    /* 寫inline block會比inline好調整 
    https://ytclion.medium.com/css教學-關於display-inline-inline-block-block的差別-1034f38eda82*/
    display: inline-block;
    /* 
    指令可以用padding做大小
    width: 100px;
    height: 100px; */
    background-color: rgb(37, 143, 124);
    padding: 0px 24px;
    line-height: 48px;
    color: aliceblue;
    font-size: 18px;
    text-decoration: none;
    font-family: '微軟正黑體';
    font-weight: 600px;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn1:hover{
    border-bottom: 8px solid rgb(19, 107, 109);
    transform: translate(0,-8px);
}
.btn1:active{
    transform: translate(0,0);
    border-bottom:0px solid rgb(19, 107, 109) ;
    /* background-color: rgb(19, 107, 109,); */
    translate:all 0.5s ;
}

.btn2{
    /* border: 2px solid #000; */
    display: inline-block;
    text-decoration: none;
    font-size: 32px;
    line-height: 60px;
    color: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    transition: all 0.3s;

}
/* 文字變化後顏色 */
.btn2:hover{
    color: #ff9eb8;
}
/* 上底線變化前設定 */
.btn2::before{
    content: '';
    display: block;
    /* 以下為元件content的設定 */
    width: 0;
    height: 3px;
    background-color: #f6a4a4;
    position: absolute;
    /* 補充：如何讓線從中間往兩邊長？定位點不同，長得方向會不一樣
    (left:50%  transforlate(-50%,0))
    */
    left: 0;
    top: 0;
    transition: all 0.3s;

}
/* 下底線變化後前設定 */
.btn2::after{
    content: '';
    display: block;
    /* 以下為元件content的設定 */
    width: 0;
    height: 3px;
    background-color: #f6a4a4;
    position: absolute;
    /* 注意線是從右畫到左 */
    right: 0;
    bottom: 0;
    transition: all 0.3s;

}

/* 線變化後設定 */
.btn2:hover::before, .btn2:hover::after{
    width: 100%;
}