css實現按鈕觸控hover變色(三種方法)

2021-10-24 05:39:22 字數 1188 閱讀 5999

基本節點寫好:

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

documenttitle

>

href

="./style.css"

rel="stylesheet"

type

="text/css"

/>

head

>

>

>

class

="btn btn-1"

>

按鈕一a

>

class

="btn btn-2"

>

按鈕二a

>

class

="btn btn-3"

>

按鈕三a

>

div>

body

>

html

>

先對樣式 reset ,並寫好基礎按鈕樣式.btn

.btn-2:hover
注:打高光比找變色簡單,效果十分近似,但在很特殊的情況下,會影響到子節點帶filter:invert()的元素,會使反色受到影響。

CSS實現漢堡按鈕

漢堡按鈕的實現思想是 button內包含乙個span,設定span為絕對定位,並設定背景顏色,使之成為漢堡按鈕的夾心,同理,再用span before span after,創造一上一下兩片麵包,具體實現如下 效果如圖 lang en charset utf 8 titletitle hamburg...

css 實現關閉按鈕

closebtn closebtn before效果圖 以上摘自 可以修改 content到內容編碼 可以的有以下選項 特殊字元和形狀可以省去很多事情,整理了一下網上的,留著以後用 基本形狀 9650 25b2 9658 25ba 9658 25ba 966025bc 9668 25c4 10084...

css3的乙個小demo(箭頭hover變化)

1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 style type text css 6a 89.select self area select btn i up down 13.select self area select...