button 的作法

感覺目前看到都會用  html5 的   a 連結來作



例如:

    <div class="ctaBtns">
                        <a class="button" href="#contact">餐廳位置</a>
     </div>
當點選時,  就會跳到  id 為  contact  的位置


css 部分為 :


.button {
    line-height: 1;
    padding: 12px 12px;
    letter-spacing: 2px;
    font-size: 14px;
    background-color: rgba(255,255,255,1);  //  背景為白色
    color: rgba(42,43,47,1);     // 文字顏色
    border-radius: 8px;          //  帶一點圓弧
}

.button:hover {
    text-decoration: none;    //  把原本a連結的下底線拿掉
    color:rgb(239, 36, 106);   //  換成另外一個顏色
    transition: 0.4s;              //  切換過去的時間
}