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

海轟Pro發表於2021-03-29

前言

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

效果展示

在這裡插入圖片描述

思路

上面效果可以概括為：

滑鼠未停留時：紅藍（漸變）背景，正中文字為白色，button四角做了圓角處理
滑鼠停留時：button背景變成白色，文字變為藍色，邊框四條直線產生匯聚效果，同時每條直線會有一個陰影的產生。

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

背景、文字的顏色變化使用hover就可以實現
左/右兩邊的兩條線可以使用button的::before/::after偽類，結合transition，當滑鼠停留時，實現兩條線的延展
中間的文字使用span標籤，需要使用span標籤的偽類
上下兩條線利用span的偽類::before/::after實現，原理類似左右兩邊的直線

其實與上一篇文章實現的原理是一樣的，只是線條的位置和方向有所變化，其他基本沒有什麼變化「HTML+CSS」--自定義按鈕樣式【001】

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"><span>Haihong Pro</span></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: radial-gradient(circle, rgba(247, 150, 192, 1) 0%, rgba(118, 174, 241, 1) 100%);
    border: none;
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 48px;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    line-height: 120px;
}
.btn span{
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
}
.btn:hover{
    background: transparent;
    color: #76aef1;
}
.btn::before,
.btn::after{
    content: '';
    position: absolute;
    width: 1px;
    height: 1px;
    box-shadow:
    -1px -1px 20px 0px rgba(255, 255, 255, 1),
    -4px -4px 5px 0px rgba(255, 255, 255, 1),
    10px 10px 20px 0px rgba(0, 0, 0, .4),
    6px 6px 5px 0px rgba(0, 0, 0, .3);
    transition: all 0.8s ease;
    padding: 0;
}
.btn::before{
    top: 0;
    right: 0;
}
.btn::after{
    bottom: 0;
    left: 0;
}
.btn:hover::before,
.btn:hover::after{
    height: 100%;
}
.btn span::before,
.btn span::after{
    position:absolute;
    content: '';
    height: 1px;
    width: 0px;
    box-shadow:
    -1px -1px 20px 0px rgba(255, 255, 255, 1),
    -4px -4px 5px 0px rgba(255, 255, 255, 1),
    10px 10px 20px 0px rgba(0, 0, 0, .4),
    6px 6px 5px 0px rgba(0, 0, 0, .3);
    transition: all 0.8s ease;
}
.btn span::before{
    top:0;
    left: 0;
}
.btn span::after{
    bottom: 0;
    right: 0;
}
.btn span:hover::before,
.btn span:hover::after{
    width: 100%;
}

疑點詳解

1.怎麼實現下圖中的效果呢？
在這裡插入圖片描述
其實這個利用boder-shadow就可以實現了，對每一條直線都新增一下陰影效果就可以了

 box-shadow:
    -1px -1px 20px 0px rgba(255, 255, 255, 1),
    -4px -4px 5px 0px rgba(255, 255, 255, 1),
    10px 10px 20px 0px rgba(0, 0, 0, .4),
    6px 6px 5px 0px rgba(0, 0, 0, .3);

2.偽類元素的位置

與上一篇文章的區別在於，這裡button的兩個偽類::before和::after的位置有所變化，分別位於左下和右上

初始width都為1px，height為0

注：這裡為了演示，將width/heigth都設定為了10px，背景色為紅色，便於觀察
在這裡插入圖片描述