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

海轟Pro發表於2021-03-28

前言

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效果展示,根據原始碼一點一點學習知識點,文中有不對的地方,歡迎指出~

在這裡插入圖片描述

相關文章