2. 程式人生 > >36種button樣式

36種button樣式

阿新 • • 發佈：2019-01-17
body{ background: #f5faff; } .demo_con{ width: 960px; margin:40px auto 0; } .button{ width: 140px; line-height: 38px; text-align: center; font-weight: bold; color: #fff; text-shadow:1px 1px 1px #333; border-radius: 5px; margin:0 20px 20px 0; position: relative; overflow: hidden; } .button:nth-child(6n){ margin-right
: 0; } .button.gray{ color: #8c96a0; text-shadow:1px 1px 1px #fff; border:1px solid #dce1e6; box-shadow: 0 1px 2px #fff inset,0 -1px 0 #a8abae inset; background: -webkit-linear-gradient(top,#f2f3f7,#e4e8ec); background: -moz-linear-gradient(top,#f2f3f7,#e4e8ec); background: linear-gradient(top,#f2f3f7,#e4e8ec)
; } .button.black{ border:1px solid #333; box-shadow: 0 1px 2px #8b8b8b inset,0 -1px 0 #3d3d3d inset,0 -2px 3px #8b8b8b inset; background: -webkit-linear-gradient(top,#656565,#4c4c4c); background: -moz-linear-gradient(top,#656565,#4a4a4a); background: linear-gradient(top,#656565,#4a4a4a); } .button.red{ border
:1px solid #b42323; box-shadow: 0 1px 2px #e99494 inset,0 -1px 0 #954b4b inset,0 -2px 3px #e99494 inset; background: -webkit-linear-gradient(top,#d53939,#b92929); background: -moz-linear-gradient(top,#d53939,#b92929); background: linear-gradient(top,#d53939,#b92929); } .button.yellow{ border:1px solid #d2a000; box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset; background: -webkit-linear-gradient(top,#fece34,#d8a605); background: -moz-linear-gradient(top,#fece34,#d8a605); background: linear-gradient(top,#fece34,#d8a605); } .button.green{ border:1px solid #64c878; box-shadow: 0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset; background: -webkit-linear-gradient(top,#90dfa2,#84d494); background: -moz-linear-gradient(top,#90dfa2,#84d494); background: linear-gradient(top,#90dfa2,#84d494); } .button.blue{ border:1px solid #1e7db9; box-shadow: 0 1px 2px #8fcaee inset,0 -1px 0 #497897 inset,0 -2px 3px #8fcaee inset; background: -webkit-linear-gradient(top,#42a4e0,#2e88c0); background: -moz-linear-gradient(top,#42a4e0,#2e88c0); background: linear-gradient(top,#42a4e0,#2e88c0); } .round, .side, .tags{ padding-right: 30px; } .round:after{ position: absolute; display: inline-block; content: "\003c"; top:50%; right:10px; margin-top: -10px; width: 17px; height: 20px; padding-left: 3px; line-height:18px; font-size: 10px; font-weight: normal; border-radius: 10px; text-shadow:-2px 0 1px #333; -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); transform:rotate(-90deg); } .gray.round:after{ box-shadow:1px 0 1px rgba(255,255,255,1) inset,1px 0 1px rgba(0,0,0,.2); background:-webkit-linear-gradient(top,#dce1e6,#dde2e7); background:-moz-linear-gradient(top,#dce1e6,#dde2e7); background:linear-gradient(top,#dce1e6,#dde2e7); text-shadow:-2px 0 1px #fff; } .black.round:after{ box-shadow:1px 0 1px rgba(255,255,255,.5) inset,1px 0 1px rgba(0,0,0,.9); background:-webkit-linear-gradient(top,#333,#454545); background:-moz-linear-gradient(top,#333,#454545); background:linear-gradient(top,#333,#454545); } .red.round:after{ box-shadow:1px 0 1px rgba(255,255,255,.6) inset,1px 0 1px rgba(130,25,25,.9); background:-webkit-linear-gradient(top,#b12222,#b42323); background:-moz-linear-gradient(top,#b12222,#b42323); background:linear-gradient(top,#b12222,#b42323); } .yellow.round:after{ box-shadow:1px 0 1px rgba(255,255,255,.8) inset,1px 0 1px rgba(148,131,4,.9); background:-webkit-linear-gradient(top,#cf9d00,#d2a000); background:-moz-linear-gradient(top,#cf9d00,#d2a000); background:linear-gradient(top,#cf9d00,#d2a000); } .green.round:after{ box-shadow:1px 0 1px rgba(255,255,255,.8) inset,1px 0 1px rgba(51,126,66,.9); background:-webkit-linear-gradient(top,#64c878,#6dcb80); background:-moz-linear-gradient(top,#64c878,#6dcb80); background:linear-gradient(top,#64c878,#6dcb80); } .blue.round:after{ box-shadow:1px 0 1px rgba(255,255,255,.8) inset,1px 0 1px rgba(18,85,128,.9); background:-webkit-linear-gradient(top,#1e7db9,#2b85bd); background:-moz-linear-gradient(top,#1e7db9,#2b85bd); background:linear-gradient(top,#1e7db9,#2b85bd); } .side:after{ position: absolute; display: inline-block; content: "\00bb"; top:3px; right:-4px; width: 38px; height:30px; font-weight: normal; line-height: 26px; border-radius:0 0 5px 5px; text-shadow:-2px 0 1px #333; -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); transform:rotate(-90deg); } .gray.side:after{ text-shadow:-2px 0 1px #fff; border-top: 1px solid #d4d4d4; box-shadow:-2px 0 1px #eceef1 inset; background:-webkit-linear-gradient(right,#e1e6ea,#f2f2f6 60%); background:-moz-linear-gradient(right,#e1e6ea,#f2f2f6 60%); background:linear-gradient(right,#e1e6ea,#f2f2f6 60%); } .black.side:after{ border-top: 1px solid #222; box-shadow:-2px 0 1px #606060 inset; background:-webkit-linear-gradient(right,#373737,#555 60%); background:-moz-linear-gradient(right,#373737,#555 60%); background:linear-gradient(right,#373737,#555 60%); } .red.side:after{ border-top: 1px solid #aa1e1e; box-shadow:-2px 0 1px #c75959 inset; background:-webkit-linear-gradient(right,#b82929,#d73f3f 60%); background:-moz-linear-gradient(top,#b82929,#d73f3f 60%); background:linear-gradient(top,#b82929,#d73f3f 60%); } .yellow.side:after{ border-top: 1px solid #ba8f06; box-shadow:-2px 0 1px #deb842 inset; background:-webkit-linear-gradient(right,#d5a406,#fdc40b 60%); background:-moz-linear-gradient(right,#d5a406,#fdc40b 60%); background:linear-gradient(right,#d5a406,#fdc40b 60%); } .green.side:after{ border-top: 1px solid #53b567; box-shadow:-2px 0 1px #8ad599 inset; background:-webkit-linear-gradient(right,#69ca7c,#91e5a5 60%); background:-moz-linear-gradient(right,#69ca7c,#91e5a5 60%); background:linear-gradient(right,#69ca7c,#91e5a5 60%); } .blue.side:after{ border-top: 1px solid #1971a8; box-shadow:-2px 0 1px #559dca inset; background:-webkit-linear-gradient(right,#2482bd,#3fa2e0 60%); background:-moz-linear-gradient(right,#2482bd,#3fa2e0 60%); background:linear-gradient(right,#2482bd,#3fa2e0 60%); } .tags:after{ font-weight: normal; position: absolute; display: inline-block; content: "FREE"; top:-3px; right: -33px; color: #fff; text-shadow:none; width: 85px; height:25px; line-height: 28px; -webkit-transform:rotate(45deg) scale(.7,.7); -moz-transform:rotate(45deg) scale(.7,.7); transform:rotate(45deg) scale(.7,.7); } .gray.tags:after{ background: #8c96a0; border:2px solid #fff; } .black.tags:after{ background: #333; border:2px solid #777; } .red.tags:after{ background: #b42323; border:2px solid #df4141; } .yellow.tags:after{ background: #d2a000; border:2px solid #fcc100; } .green.tags:after{ background: #64c878; border:2px solid #9bebac; } .blue.tags:after{ background: #1e7db9; border:2px solid #54b1e9; } .button.rarrow, .button.larrow{ overflow:visible; } .rarrow:after, .rarrow:before, .larrow:after, .larrow:before{ position:absolute; content: ""; display: block; width: 28px; height: 28px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); transform:rotate(45deg); } .rarrow:before{ width: 27px; height: 27px; top: 6px; right: -13px; clip: rect(auto auto 26px 2px); } .rarrow:after{ top: 6px; right: -12px; clip: rect(auto auto 26px 2px); } .gray.rarrow:before{ background: #d6dbe0; } .gray.rarrow:after{ box-shadow: 0 1px 0 #fff inset,-1px 0 0 #b7babd inset; background:-webkit-linear-gradient(top left,#f2f3f7,#e4e8ec); background:-moz-linear-gradient(top left,#f2f3f7,#e4e8ec); background:linear-gradient(top left,#f2f3f7,#e4e8ec); } .black.rarrow:before{ background: #333; } .black.rarrow:after{ box-shadow: 0 1px 0 #8B8B8B inset,-1px 0 0 #3d3d3d inset,-2px 0 0 #8B8B8B inset; background:-webkit-linear-gradient(top left,#656565,#4C4C4C); background:-moz-linear-gradient(top left,#656565,#4C4C4C); background:linear-gradient(top left,#656565,#4C4C4C); } .red.rarrow:before{ background: #B42323; } .red.rarrow:after{ box-shadow: 0 1px 0 #E99494 inset,-1px 0 0 #954B4B inset,-2px 0 0 #E99494 inset; background:-webkit-linear-gradient(top left,#D53939,#B92929); background:-moz-linear-gradient(top left,#D53939,#B92929); background:linear-gradient(top left,#D53939,#B92929); } .yellow.rarrow:before{ background: #D2A000; } .yellow.rarrow:after{ box-shadow: 0 1px 0 #FEDD71 inset,-1px 0 0 #A38B39 inset,-2px 0 0 #FEDD71 inset; background:-webkit-linear-gradient(top left,#FECE34,#D8A605); background:-moz-linear-gradient(top left,#FECE34,#D8A605); background:linear-gradient(top left,#FECE34,#D8A605); } .green.rarrow:before{ background: #64C878; } .green.rarrow:after{ box-shadow: 0 1px 0 #B9ECC4 inset,-1px 0 0 #6C9F76 inset,-2px 0 0 #B9ECC4 inset; background:-webkit-linear-gradient(top left,#90DFA2,#84D494); background:-moz-linear-gradient(top left,#90DFA2,#84D494); background:linear-gradient(top left,#90DFA2,#84D494); } .blue.rarrow:before{ background: #1E7DB9; } .blue.rarrow:after{ box-shadow: 0 1px 0 #8FCAEE inset,-1px 0 0 #497897 inset,-2px 0 0 #8FCAEE inset; background:-webkit-linear-gradient(top left,#42A4E0,#2E88C0); background:-moz-linear-gradient(top left,#42A4E0,#2E88C0); background:linear-gradient(top left,#42A4E0,#2E88C0); } .larrow:before{ top: 6px; left: -13px; width: 27px; height: 27px; clip: rect(2px 26px auto auto); } .larrow:after{ top: 6px; left: -12px; clip: rect(2px 26px auto auto); } .gray.larrow:before{ background: #d6dbe0; } .gray.larrow:after{ box-shadow: 0 -1px 0 #b7babd inset,1px 0 0 #fff inset; background:-webkit-linear-gradient(top left,#f2f3f7,#e4e8ec); background:-moz-linear-gradient(top left,#f2f3f7,#e4e8ec); background:linear-gradient(top left,#f2f3f7,#e4e8ec); } .black.larrow:before{ background: #333; } .black.larrow:after{ box-shadow: 0 -1px 0 #3d3d3d inset,0 -2px 0 #8B8B8B inset,1px 0 0 #8B8B8B inset; background:-webkit-linear-gradient(top left,#656565,#4C4C4C); background:-moz-linear-gradient(top left,#656565,#4C4C4C); background:linear-gradient(top left,#656565,#4C4C4C); } .red.larrow:before{ background: #B42323; } .red.larrow:after{ box-shadow: 0 -1px 0 #954B4B inset,0 -2px 0 #E99494 inset,1px 0 0 #E99494 inset; background:-webkit-linear-gradient(top left,#D53939,#B92929); background:-moz-linear-gradient(top left,#D53939,#B92929); background:linear-gradient(top left,#D53939,#B92929); } .yellow.larrow:before{ background: #D2A000; } .yellow.larrow:after{ box-shadow: 0 -1px 0 #A38B39 inset,0 -2px 0 #FEDD71 inset,1px 0 0 #FEDD71 inset; background:-webkit-linear-gradient(top left,#FECE34,#D8A605); background:-moz-linear-gradient(top left,#FECE34,#D8A605); background:linear-gradient(top left,#FECE34,#D8A605); } .green.larrow:before{ background: #64C878; } .green.larrow:after{ box-shadow: 0 -1px

相關推薦

36種button樣式

body{ background: #f5faff; } .demo_con{ width: 960px; margin:40px auto 0; } .button{ width: 140px; line-height: 38px; text-align: center; font-weight: bo

36種漂亮的CSS3網頁按鈕Button樣式，總有你喜歡的

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>36種漂亮的CSS3網頁按鈕Button樣式</title&g

Button樣式

android fin tran tps 透明度 透明 技術 class 設置 Button或者ImageButton的背景設為透明或者半透明 半透明<Button android:background="#e0000000" ... /> 透明<Butt

UWP 改變Button樣式

文本 es2017 都是 some 屬性 border 如果 顏色 cnblogs -----some words------ 1.Control：控制 （我們理解成控件） 2.Template：模板 3.Ellipse 橢圓 4.Content 內容 5.Presente

DevExpress的42種窗體樣式

family mil str ted 樣式 第一步 控件 nta 應用程序 在Winform環境下DevExpress標題欄皮膚 第一步：添加DLL文件 Debug目錄下添加： DevExpress.BonusSkins.v12.2.dll DevExpress.Utils

Python視覺化中Matplotlib(4.三種設定樣式方法、設定座標刻度以及標籤、設定顯示出特殊字元)

1.三種設定方式   (1)向方法傳入關鍵字引數 上一節已經總結過，一直在使用   （2）對例項使用一系列的setter方法           具體的方法直接看程式碼  import matplotli

cursor的幾種定義樣式總結

cursor樣式： 取值 IE支援版本 樣式 含義 auto   預設值 瀏覽器自動確定滑鼠游標型別。 crosshair   十字準心 &nb

C# WPF button樣式清空以及關閉 最小化 按鈕重置

 屬性 ResizeMode="CanResizeWithGrip" 設定視窗拉動 屬性 MouseLeftButtonDown="DragWindow" 設定 滑鼠拖動視窗 C#後臺（滑鼠移動視窗） <Window.Resources> ..

html+css3自定義button樣式

原生的按鈕有點醜，為此需要改裝一下樣式，達到適應頁面或者美化的作用，下面的連線是用input做按鈕和button做按鈕的區別，有興趣的可以看看。 https://blog.csdn.net/u010458114/article/details/79371304 先上效果圖： h

android使用xml自定義button樣式

1.首先寫一個定義Button樣式的XML檔案： 新建Android XML檔案，型別選Drawable,根結點選selector，名字自選 2.在xml中寫程式碼： <?xml version="1.0" encoding="utf-8"?>  <sel

微信小程式之分享或轉發功能（自定義button樣式）

小程式頁面內發起轉發 通過給 button 元件設定屬性open-type="share"，可以在使用者點選按鈕後觸發 Page.onShareAppMessage 事件，如果當前頁面沒有定義此事件，則點選後無效果。相關元件：button wxml： <!-- 分享 --> <!--/

wux-button 樣式擴充套件 增加shape屬性

1、原來的寫法和介面圖如下 <wux-button block type="orange">拍照確認</wux-button> 2、現在的寫法只需要增加一個shape="round"引數，可以實現按鈕邊框為半圓 <wux-button

Android中AlterDialog四種實現樣式

   （1）用於提示資訊  如：是否退出系統?是 OR  否     第一步：例項化AlertDialog.Builder物件     AlertDialog.Builder    builder=new AlertDialog.Builder(this);     ps

[JS][前端]修改檔案input為button樣式

問題描述 在開發的時候，遇到了需要提交表單檔案的需求，但是原生<input>標籤特別不好看，而且還有點選提交檔案的提示，這樣很影響美觀，於是便想著更改<input>為<button>按鈕。 解決方案 建

WPF Button 樣式 滑鼠移入發光

<Style TargetType="Button"> <Setter Property="Foreground" Value="Black"></Setter> <Setter P

登入註冊、在微信小程式中是怎麼修改button樣式的？

http://www.downza.cn/edu/38806.html 導讀: 小編今天給大家帶來的教程是在微信小程式中是怎麼修改button樣式的，下面就是詳細完整的內容，一起跟小編來看看吧。 　　小編今天給大家帶來的教程是在微信小程式中是怎麼修改button樣式的

四種CSS樣式表的引入方式

 程式碼： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml

36種漂亮的按鈕的div+css原始碼

效果圖： 原始碼如下： <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>36種漂亮的CSS3網頁按鈕Butto

QML 自定義Button樣式，實現按鈕三態切換

初學QML的時候，遇到了一些問題，參考這篇文章，實現了按鈕的正常、滑鼠經過和滑鼠按下的圖片切換。遇到了一些問題，比如背景色有白邊，設定圖片大小不生效。嘗試了幾種方法後，還是發現原來的方法比較好。記錄一下

bootstrap之button樣式

一、前言 現在開始介紹bootstrap的button模組樣式，包括buttons.less、button-groups.less。 二、原始碼 1、buttons.less 1.1、buttons.less原始碼 // // Bu