「HTML+CSS」--自定義按鈕樣式【003】

海轟Pro發表於2021-03-30

前言

Hello！小夥伴！
首先非常感謝您閱讀海轟的文章，倘若文中有錯誤的地方，歡迎您指出～
哈哈自我介紹一下
暱稱：海轟
標籤：程式猿一隻｜C++選手｜學生
簡介：因C語言結識程式設計，隨後轉入計算機專業，有幸拿過國獎、省獎等，已保研。目前正在學習C++/Linux（真的真的太難了～）
學習經驗：紮實基礎 + 多做筆記 + 多敲程式碼 + 多思考 + 學好英語！
日常分享：微信公眾號【海轟Pro】記錄生活、學習點滴，分享一些原始碼或者學習資料，歡迎關注～

效果展示

在這裡插入圖片描述

思路

上面效果可以概括為：

滑鼠未停留時：青色（漸變）背景，正中文字為白色，button四角做了圓角處理
滑鼠停留時：淺青色背景從上至下，依次覆蓋button
滑鼠離開button時：淺青色背景從上至下，依次消失，button逐漸恢復原樣

根據效果圖可以得出實現的一些思路：

初始狀態，設定button背景為漸變青色，中間文字為白色，做圓角、陰影處理
初看有兩個過渡效果，其實是可以用一個元素的過渡transition實現的
這裡我們就利用button的::before偽類元素來實現
將::before設定為絕對定位，初始位置為左下角（右下也是可以的），其中width設定為100%，height為0
觸發hover時，height設定為100%，top設定為0 （記住這裡的關鍵點top:0）
還有就是，button和::before的背景顏色需要有所深淺變化

這裡使用的漸變色：

深青（漸變）：linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
淺青（漸變）：linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);

Demo程式碼

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <button class="btn">Haihong Pro</button>
</body>
</html>

CSS

html,body{
    margin: 0;
    height: 100%;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn{
    width: 390px;
    height: 120px;
    background:linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
    border: none;
    border-radius: 10px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 48px;
    color: #fff;
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
    7px 7px 20px 0px rgba(0, 0, 0, .1),
    4px 4px 5px 0px rgba(0, 0, 0, .1);
    outline: none;
    position: relative;
    z-index: 0;
}
.btn::before{
    position:absolute;
    content: '';
    left: 0;
    bottom:0;
    width: 100%;
    height: 0;
    transition: all 0.3s ease;
    border-radius: 10px;
    background: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
    z-index: -1;
}
.btn:hover::before{
    top: 0;
    height: 100%;
}
.btn:active{
    top: 2px;
}