HTML 在頁面上放置了一個按鈕
<button class="btn">點擊按鈕</button>
如果想要實現當鼠標懸停在按鈕上時,按鈕文字加粗,在 CSS 里這樣設置
.btn:hover {
font-weight: bolder;
}
但是這樣做了之后,當文字加粗后,勢必會將按鈕的尺寸撐的更大。那么有可能會影響到按鈕周圍其他 HTML 元素的位置,如果你的頁面內容比較多,而且比較緊湊的話,撐大的按鈕會將周圍的元素推開,這很有可能會擾亂頁面的布局。
如果既要保留按鈕的鼠標懸停文字加粗的效果,還不能影響到周圍元素的位置,可以再給按鈕設定一個固定的尺寸。
.btn {
padding: 1rem;
width: 4rem;
}
.btn:hover {
font-weight: bolder;
}
這樣按鈕的尺寸就不會變化,但是文字在鼠標懸停時會加粗,按鈕周圍的元素也不會受到影響。
以上這種情況一般在頁面頂部的導航條上最為常見,請大家注意。
SS偽元素主要是指HTML中沒有定義、存在的元素,偽元素本身不是真正的頁面元素,但是偽元素在使用過程中,其用法與效果與其他真正頁面元素是一樣的。偽元素只能在定義基礎上動態顯示其運行效果,在HTML源文件中并沒有該元素的真正代碼。CSS3中所定義的所有偽元素與偽類描述如下圖所示:
CSS偽元素與偽類
ripple波紋
按鈕的波紋效果主要是指按鈕在點擊時展示出的動態效果。在實現效果過程中可行的方法方式較多,例如可以使用JavaScript、CSS動畫、JQuery等。網上目前按鈕波紋實現效果較多,部分樣式效果展示如下:
波紋效果展示
CSS偽類波紋效果主要借助于before、after偽類與hover懸停選擇器等實現類似波紋效果,本文主要借助after及hover等實現按鈕的波紋效果,本例設計兩種類似波紋效果,最終實現效果展示如下圖所示:
設計樣式1
設計樣式2
本文設計實現的兩類波紋效果樣式描述如上圖gif所示,其實現過程描述如下:
1、按鈕基本樣式設計
本例按鈕基本樣式主要包括寬度、高度、背景顏色等。使用元素選擇器與類選擇器定義了按鈕元素的基本樣式,其樣式實現代碼描述如下:
button,.button2,.button{width: 200px; height: 50px; background-color: green;border: 0; cursor: pointer;color: #FFF; font-size: 16px; position: relative;}
.button類主要用以實現設計樣式1,.button2類主要用于實現設計效果2,兩類按鈕定義描述如下:
<button type="button" class="button">Ripple1</button> <button type="button" class="button2">Ripple2</button>
2、after偽元素使用
after偽元素主要用于實現在指定元素的后面添加新的內容。本例提供的兩種設計方式都是在button元素的后面添加新的類似div的新元素,其中樣式1,新添加的元素與button本身重合,尺寸也一致。設計樣式2中after元素位于button的底部位置,寬度與button相同,高度為指定尺寸5px。兩個設計中after元素樣式為實現動態展開效果都涉及寬度width為0。after元素的樣式定義如下:
.button::after{content: " "; width: 0; height: 50px; position: absolute; left:50%;top: 0%;background-color: red;opacity: 0; transition: all .4s; } .button2::after{content: " "; width: 0; height: 5px; position: absolute; left:50%;top: 100%;background-color: red;transition: all .4s; }
after元素CSS樣式定義中使用了transition屬性實現動畫效果,即在0.4s內實現寬度從0改變為100%。
3、hover選擇器的使用
hover選擇器為懸停選擇器,主要對鼠標在HTML元素懸停時樣式進行設置。本例兩個涉及效果都是借助hover懸停選擇器對after樣式進行設置,在初始化設置寬度為0的基礎上寬度改變為100%,最終實現兩端伸展的效果。hover選擇器定義after元素樣式描述如下所示:
.button:hover::after{left:0%; width: 100%; opacity: 0.6;} .button2:hover::after{left:0%; width: 100%;}
以上給出了CSS偽元素實現波紋效果,主要借助了after、before偽元素與hover懸停選擇器等。設計實現效果完整源文件截圖如下:
案例完整代碼
以上給出了JavaScript中的事件基本概念及案例分析,如有問題可在評論區討論。本頭條號長期關注編程資訊分享;編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見,可以聯系作者,共同探討。期待大家關注!相關文章鏈接如下:
前端開發-JavaScript中的事件(Event)及事件處理總結
前端開發-CSS3動畫實現焦點(圖文輪播)圖效果
前端開發-JavaScript DOM動態生成文本框
前端設計-教你如何快速繪制HTML5動畫
前端設計-響應式頁面開發基礎
前端設計-Ajax技術及實例展示
天跟大家分享與CSS3按鈕相關的特效展示案例,這些例子特效主要由CSS3編寫出來,除了新鮮有創意之外,編寫代碼質量也很高,對于前端人員或設計師都有參考的價值,當然有的不是全CSS3編寫的,部分是需要與JS代碼結合使用才能發揮效果。
下面大家一起看看這些CSS按鈕DEMO,確實很酷哦!
整理了16款css按鈕,經過全部測試,沒發現有影響使用的bug,其中也可能存在部分bug,但是應該問題不大。
代碼已上傳到網盤,獲取源碼請關注公眾號【青年碼農】回復【css按鈕】即可。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。