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

海轟Pro發表於2021-03-28
HTMLCSS

前言

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

效果展示

在這裡插入圖片描述

思路

上面效果可以概括為：

  • 滑鼠未停留時：藍色（漸變）背景，正中文字為白色，button四角做了圓角處理
  • 滑鼠停留時：button背景變成白色，文字變為藍色，同時右上方、左下角同時延伸兩條互相垂直的線條

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

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

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; 
   color: #fff; 
   background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
   font-family: 'Lato', sans-serif;
   font-weight: 500;
   border-radius: 10px;
   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);
   transition: all 0.3s ease;
   cursor: pointer;
   border: none;
   position: relative;
   line-height: 120px;
   padding: 0;
}
.btn span{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    font-size: 48px;
}
.btn::before,.btn::after{
    position:absolute;
    content: '';
    top: 0;
    right: 0;
    background: rgba(2, 126, 251, 1); 
    transition: all 0.3s ease;
}
.btn::before{
    width: 0;
    height: 2px;
}
.btn::after{
    height: 0;
    width: 2px;
}
.btn span::before,
.btn span::after{
    position:absolute;
    content: '';
    bottom: 0;
    left: 0;
    background: rgba(2, 126, 251, 1);
    transition: all 0.3s ease;
}
.btn span::before{
    width: 0;
    height: 2px;
}
.btn span::after{
    height: 0;
    width: 2px;
}

.btn:hover{
    background: transparent;
    color: rgba(2, 126, 251, 1);
}

.btn:hover::before{
    width: 100%;
}
.btn:hover::after{
    height: 100%;
}
.btn span:hover::before{
    width: 100%;
}
.btn span:hover::after{
    height: 100%;
}

疑點詳解

怎麼實現兩條線的延展的呢？

首先，使用::before和::after偽類，在button的前後新增兩個偽元素
一個width=0，height=2px；另一個height=0，width=2px
在這裡插入圖片描述

在這裡插入圖片描述
在這裡插入圖片描述
這裡便於理解和觀察，我們將這兩個元素顯示出來

修改css程式碼：將before改為紅色，便於觀察，同時width、height都改為20px

.btn::before,.btn::after{
    position:absolute;
    content: '';
    top: 0;
    right: 0;
    background: red; 
    transition: all 0.3s ease;
}
.btn::before{
    width: 20px;
    height: 20px;
}

現在就可以觀察到before的具體位置了
在這裡插入圖片描述
在這裡插入圖片描述
利用CSS 中的 transition 屬性，在滑鼠停留（hover）在其上時，將其寬度修改為100%，
就可以實現延展效果了

// 滑鼠停留在上方時，寬度變成100%
.btn:hover::before{
    width: 100%;
}

在這裡插入圖片描述
不瞭解css transition的小夥伴可以檢視：

transition簡介：https://www.w3school.com.cn/cssref/pr_transition.asp

一個before實現寬度的延伸，另一個after就實現高度的延伸，所以一個元素的兩個偽元素就可以實現兩條線的延展效果

同樣，左下角的延展就是利用span的::before和::after偽元素了

踩坑

1.父元素button沒有設定padding=0，會出現四條線沒有完美閉合的情況
在這裡插入圖片描述
2. button元素中應該設定position: relative，如果沒有會出現：
在這裡插入圖片描述
原因：因為button的before和after偽元素中的 position:absolute; 所以必須設定button position: relative，

position中absolute是指：生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。

如果不宣告button的position為relative，那麼此時button::before/after就會認為它的父元素是瀏覽器，那麼絕對定位也就是根據瀏覽器而定了。

註釋版程式碼

html,body{
    margin: 0;
    height: 100%;
}
body{
    /* 元素居於正中 */
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn{
   width: 390px;
   height: 120px; 
   /* 文字顏色為白色 */
   color: #fff; 
   /* button背景色為漸變藍色 */
   background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
   /* 字型設定 */
   font-family: 'Lato', sans-serif;
   font-weight: 500;
   /* 圓角處理 */
   border-radius: 10px;
   /* button陰影設定 */
   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);
   /* 設定過渡屬性  所以元素過渡 持續時間：0.3s 速度曲線型別：ease*/
   transition: all 0.3s ease;
   /* 滑鼠停留時，變為小手 */
   cursor: pointer;
   border: none;
   position: relative;
   /* 行高  */
   line-height: 120px;
   padding: 0;
}
.btn span{
    /* 相對定位 */
    position: relative;
    /* 塊級元素 */
    display: block;
    width: 100%;
    height: 100%;
    font-size: 48px;
}
.btn::before,.btn::after{
    /* 絕對定位 */
    position:absolute;
    /* content必須有 不然不顯示 */
    content: '';
    /* 定位右上角 */
    top: 0;
    right: 0;
    /* 背景色：藍色 */
    background: rgba(2, 126, 251, 1); 
    transition: all 0.3s ease;
}
.btn::before{
    /* 初始化 */
    width: 0;
    height: 2px;
}
.btn::after{
    height: 0;
    width: 2px;
}
.btn span::before,
.btn span::after{
    /* 絕對定位 */
    position:absolute;
    content: '';
    /* 定位左下角 */
    bottom: 0;
    left: 0;
    background: rgba(2, 126, 251, 1);
    transition: all 0.3s ease;
}
.btn span::before{
    width: 0;
    height: 2px;
}
.btn span::after{
    height: 0;
    width: 2px;
}

.btn:hover{
    /* 背景透明 */
    background: transparent;
    /* 字型色變為：藍色 */
    color: rgba(2, 126, 251, 1);
}

.btn:hover::before{
    /* 寬度過渡為100% */
    width: 100%;
}
.btn:hover::after{
    /* 高度過渡為100% */
    height: 100%;
}
.btn span:hover::before{
    width: 100%;
}
.btn span:hover::after{
    height: 100%;
}

結語

學習來源：

https://codepen.io/yuhomyan/pen/OJMejWJ

css只會一點點，學習之餘從喜歡看一些大神級別的css效果展示，根據原始碼一點一點學習知識點，文中有不對的地方，歡迎指出～

在這裡插入圖片描述

相關文章