按鈕效果(before、after)

在網頁中，可以看到常常游標移動到按鈕的時候，通常都會有變化，
讓使用者知道游標有確實的接觸到，今天就要來練習這個效果

整理幾個小重點如下方：

1.這裡外觀是設定在超連結a上面，而a是inline物件，寬度大小是由內容撐開去決定的，設定尺寸會沒有效果，需要添加black的設定，這樣尺寸的設定才會有效果，超連結所覆蓋的範圍才是正確的
2.游標移至按鈕後的變化要使用hover，添加在接觸後要變化的class上，例如觸碰到超連結a後背景變成白色的，就要寫成a:hover
3.可以觀察到預設樣式是粉底白字配圓點，游標移至按鈕後是白底粉字配三角形，在這裡我使用偽元素::before、::after來分別製作
4.偽元素內要添加content: '' 之後樣式的設定才會有效果
5.偽元素的小圖示要使用到定位position: absolute;，將按鈕的a設置position: relative;，作為偽元素定位的父層依據
6.添加好定位屬性後，再使用top、right、bottom、left將物件移動到適當的位置
7.圓形的部分使用偽元素a::after去製作寫在，而觸碰變成的三角形寫在a:hover::before，使用偽元素要添加content: ''接下來的調整才會顯示
8.三角形在游標尚未觸碰前不會顯示，所以使用opacity: 0，觸碰後改為opacity: 1，圓形則反之

(*補充 三角形的製作方式之後會再詳細解說)

可參考程式碼如下方:

HTML

<div class="btn_more">
    <a href="#">了解更多</a>
</div>

CSS

.btn_more a{
    font-size: 16px;
    color: #f2f2f2;
    padding: 10px 15px;
    background-color: #f7b1b1;
    border-radius: 30px;
    display: block;
    width: 80px;
    position: relative;
    border: 1px solid #f7b1b1;
    text-decoration: none;
}
.btn_more a::after{
    content: '';
    width: 8px;
    height: 8px;
    display: block;
    background-color: #ffffff;
    border-radius: 8px;
    position: absolute;
    right: 15px;
    top: 15px;
    opacity: 1;
}
.btn_more a:hover{
    background-color: #ffffff;
    color: #f7b1b1;
    transition: .5s;
    border: 1px solid #f7b1b1;
}
.btn_more a:hover::after{
    content: '';
    opacity: 0;

}
.btn_more a:hover::before{
    content: '';
    width: 0;
    height: 0;
    border: 6px solid;
    border-color: transparent transparent transparent #f7b1b1;
    position: absolute;
    right: 9px;
    top: 13px;
}