<!DOCTYPE HTML> |
<html lang= "en-US" > |
<head> |
<meta charset= "UTF-8" > |
<title>CSS 3 Pictogram Button|w 3 cplus | css 3 |css 3 教程,css 3 实例,css 3 动画</title> |
<meta name= "keywords" content= "css3学习,css3属性详解,css3 transition,如何学好css3" > |
<meta name= "description" content= "W3CPLUS是一个前端爱好者的家园,W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创,以一起学习,一起进步,共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源,与前端爱好者一起共勉。" > |
<link rel= "shortcut icon" href= "http://www.w3cplus.com/sites/all/themes/marvin/favicon.ico" > |
<script type= "text/javascript" charset= "UTF-8" src= "http://www.w3cplus.com/demo/css3/prefixfree.min.js" ></script> |
<link rel= "stylesheet" type= "text/css" href= "http://www.w3cplus.com/demo/css3/base.css" media= "all" /> |
<style type= "text/css" > |
@import url (http://fonts.googleapis.com/css?family=Arvo); |
body { |
background : #f8fcd4 ; |
background : radial-gradient( center , ellipse cover, #f8fcd4 19% , #dbfacb 100% ); |
background-attachment : fixed ; |
} |
.demo { |
text-align : center ; |
display : block ; |
width : 800px ; |
margin : 50px auto ; |
} |
@font-face { |
font-family : 'EntypoRegular' ; |
src : url ( 'font/entypo-webfont.eot' ); |
src : url ( 'font/entypo-webfont.eot?#iefix' ) format ( 'embedded-opentype' ), |
url ( 'font/entypo-webfont.woff' ) format ( 'woff' ), |
url ( 'font/entypo-webfont.ttf' ) format ( 'truetype' ), |
url ( 'font/entypo-webfont.svg#EntypoRegular' ) format ( 'svg' ); |
font-weight : normal ; |
font-style : normal ; |
} |
.button, |
.button-bevel { |
font-family : Arial , Helvetica , sans-serif ; |
font-size : 13px ; |
color : #fff ; |
text-decoration : none ; |
display : inline- block ; |
text-align : center ; |
padding : 7px 20px 9px ; |
margin : . 5em . 5em . 5em 0 ; |
cursor : pointer ; |
text-shadow : 0 1px 1px rgba( 0 , 0 , 0 , 0.4 ); |
text-transform : capitalize ; |
transition: 0.1 s linear; |
} |
.button { |
border-radius: 2px ; |
box-shadow: inset rgba( 255 , 255 , 255 , 0.3 ) 1px 1px 0 ; |
} |
.button:hover, |
.button-bevel:hover { |
color : #fff ; |
text-decoration : none ; |
} |
|
.button:active { |
box-shadow: inset rgba( 0 , 0 , 0 , 0.4 ) 0px 0px 6px ; |
} |
.rounded { |
border-radius: 20px ; |
} |
.orange { |
background : rgb ( 255 , 183 , 0 ); |
background : -*-linear-gradient(to bottom , rgba( 255 , 183 , 0 , 1 ) 0% ,rgba( 255 , 140 , 0 , 1 ) 100% ); |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#ffb700' , endColorstr= '#ff8c00' ,GradientType= 0 ); |
border : 1px solid #e59500 ; |
} |
|
.orange:hover { |
background : rgb ( 255 , 203 , 72 ); |
background : -*-linear-gradient(to bottom , rgba( 255 , 203 , 72 , 1 ) 0% ,rgba( 255 , 156 , 35 , 1 ) 100% ); |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#ffcb48' , endColorstr= '#ff9c23' ,GradientType= 0 ); |
} |
|
.magenta { |
background : rgb ( 255 , 130 , 172 ); |
background : -*-linear-gradient(to bottom , rgba( 255 , 130 , 172 , 1 ) 0% ,rgba( 247 , 37 , 129 , 1 ) 100% ); |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#ff82ac' , endColorstr= '#f72581' ,GradientType= 0 ); |
border : 1px solid #c60a56 ; |
} |
|
.magenta:hover { |
background : rgb ( 255 , 155 , 189 ); |
background : -*-linear-gradient(to bottom , rgba( 255 , 155 , 189 , 1 ) 0% ,rgba( 248 , 62 , 143 , 1 ) 100% ); |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#ff9bbd' , endColorstr= '#f83e8f' ,GradientType= 0 ); |
} |
.cyan { |
background : rgb ( 130 , 207 , 241 ); |
background : -*-linear-gradient(to bottom , rgba( 130 , 207 , 241 , 1 ) 0% ,rgba( 56 , 174 , 234 , 1 ) 100% ); |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#82cff1' , endColorstr= '#38aeea' ,GradientType= 0 ); |
border : 1px solid #3cafcf ; |
} |
|
.cyan:hover { |
background : rgb ( 153 , 216 , 244 ); |
background : -*-linear-gradient(to bottom , rgba( 153 , 216 , 244 , 1 ) 0% ,rgba( 79 , 183 , 236 , 1 ) 100% ); |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#99d8f4' , endColorstr= '#4fb7ec' ,GradientType= 0 ); |
} |
|
. red { |
background : #e25b53 ; |
background : -*-linear-gradient(to bottom , #e25b53 0% , #dd2011 100% ); |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#e25b53' , endColorstr= '#dd2011' ,GradientType= 0 ); |
border : 1px solid #c42222 ; |
} |
.red:hover { |
background : #dd7671 ; |
background : -*-linear-gradient(to bottom , #dd7671 0% , #dd2011 100% ); |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#dd7671' , endColorstr= '#dd2011' ,GradientType= 0 ); |
} |
. black { |
background : #444444 ; |
background : -*-linear-gradient(to bottom , #444444 0% , #1c1c1c 100% ); |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#444444' , endColorstr= '#1c1c1c' ,GradientType= 0 ); |
border : 1px solid #2a2a2a ; |
} |
.black:hover { |
background : #686868 ; |
background : -*-linear-gradient(to bottom , #686868 0% , #1c1c1c 100% ); |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#686868' , endColorstr= '#1c1c1c' ,GradientType= 0 ); |
} |
. green { |
background : #82cc5d ; |
background : -*-linear-gradient(to bottom , #82cc5d 0% , #53b73c 100% ); |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#82cc5d' , endColorstr= '#53b73c' ,GradientType= 0 ); |
border : 1px solid #429E34 ; |
} |
.green:hover { |
background : #99cc80 ; |
background : -*-linear-gradient(to bottom , #99cc80 0% , #53b73c 100% ); |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#99cc80' , endColorstr= '#53b73c' ,GradientType= 0 ); |
} |
.button-bevel { |
vertical-align : top ; |
border-radius: 4px ; |
border : none ; |
padding : 10px 25px 12px ; |
} |
|
.button-bevel:active { |
position : relative ; |
top : 5px ; |
} |
|
.button-bevel.orange { |
box-shadow: #c46d00 0 6px 0px , rgba( 0 , 0 , 0 , 0.3 ) 0 10px 3px ; |
} |
.button-bevel.orange:active { |
box-shadow: #c46d00 0 3px 0 , rgba( 0 , 0 , 0 , 0.2 ) 0 6px 3px ; |
} |
|
.button-bevel.magenta { |
box-shadow: #ca075c 0 6px 0px , rgba( 0 , 0 , 0 , 0.3 ) 0 10px 3px ; |
} |
.button-bevel.magenta:active { |
box-shadow: #ca075c 0 3px 0 , rgba( 0 , 0 , 0 , 0.2 ) 0 6px 3px ; |
} |
|
.button-bevel.cyan { |
box-shadow: #1994d3 0 6px 0px , rgba( 0 , 0 , 0 , 0.3 ) 0 10px 3px ; |
} |
.button-bevel.cyan:active { |
box-shadow: #1994d3 0 3px 0 , rgba( 0 , 0 , 0 , 0.2 ) 0 6px 3px ; |
} |
|
.button-bevel. red { |
box-shadow: #88180e 0 6px 0px , rgba( 0 , 0 , 0 , 0.3 ) 0 10px 3px ; |
} |
.button-bevel.red:active { |
box-shadow: #88180e 0 3px 0 , rgba( 0 , 0 , 0 , 0.2 ) 0 6px 3px ; |
} |
|
.button-bevel. black { |
box-shadow: #000 0 6px 0px , rgba( 0 , 0 , 0 , 0.3 ) 0 10px 3px , inset rgba( 255 , 255 , 255 , 0.3 ) 0 0 3px ; |
} |
.button-bevel.black:active { |
box-shadow: #000 0 3px 0 , rgba( 0 , 0 , 0 , 0.2 ) 0 6px 3px , inset rgba( 255 , 255 , 255 , 0.3 ) 0 0 3px ; |
} |
|
.button-bevel. green { |
box-shadow: #439230 0 6px 0px , rgba( 0 , 0 , 0 , 0.3 ) 0 10px 3px ; |
} |
.button-bevel.green:active { |
box-shadow: #439230 0 3px 0 , rgba( 0 , 0 , 0 , 0.2 ) 0 6px 3px ; |
} |
.button span, |
.button-bevel span { |
font-family : 'EntypoRegular' ; |
font-size : 20px ; |
font-weight : normal ; |
vertical-align : middle ; |
line-height : 0 ; |
margin-right : . 1em ; |
} |
.refresh:after { content : "h" ; font-size : 34px ; } |
.shuffle:after { content : "f" ; font-size : 34px ; } |
.preview:after { content : "M" ; font-size : 34px ; } |
.tea:after { content : "u" ; font-size : 34px ; } |
.wifi:after { content : "T" ; font-size : 34px ; } |
.locator:after { content : "0" ; font-size : 34px ; } |
|
.rss:after { content : "S" ; font-size : 34px ; } |
.cloud:after { content : "y" ; font-size : 34px ; } |
.download:after { content : "w" ; font-size : 34px ; } |
.trash:after { content : "I" ; font-size : 34px ; } |
.rack:after { content : "t" ; font-size : 34px ; } |
.map:after { content : "1" ; font-size : 34px ; } |
|
.setting:after { content : "@" ; font-size : 34px ; } |
.identity:after { content : "." ; font-size : 34px ; } |
.navigation:after { content : "2" ; font-size : 34px ; } |
.gallery:after { content : "p" ; font-size : 34px ; } |
.email:after { content : "%" ; font-size : 34px ; } |
.users:after { content : "+" ; font-size : 34px ; } |
|
.calendar:after { content : "P" ; font-size : 34px ; } |
.link:after { content : ">" ; font-size : 34px ; } |
.time:after { content : "N" ; font-size : 34px ; } |
.folder:after { content : "s" ; font-size : 34px ; } |
.tag:after { content : "C" ; font-size : 34px ; } |
.share:after { content : "5" ; font-size : 34px ; } |
|
.lock:after { content : "U" ; font-size : 34px ; } |
.unlock:after { content : "V" ; font-size : 34px ; } |
.mic:after { content : "O" ; font-size : 34px ; } |
.love:after { content : "6" ; font-size : 34px ; } |
.star:after { content : "7" ; font-size : 34px ; } |
.like:after { content : "8" ; font-size : 34px ; } |
|
.phone:after { content : "!" ; font-size : 34px ; } |
.flag:after { content : "?" ; font-size : 34px ; } |
.adduser:after { content : "-" ; font-size : 34px ; } |
.attach:after { content : "'" ; font-size : 34px ; } |
.comment:after { content : ":" ; font-size : 34px ; } |
.edit:after { content : "&" ; font-size : 34px ; } |
|
.upload:after { content : "v" ; font-size : 34px ; } |
.storage:after { content : "x" ; font-size : 34px ; } |
.photo:after { content : "D" ; font-size : 34px ; } |
.help:after { content : "K" ; font-size : 34px ; } |
.glass:after { content : "R" ; font-size : 34px ; } |
.print:after { content : "<" ; font-size : 34px ; } |
|
.gadget:after { content : '"' ; font-size : 34px ; } |
</style> |
</head> |
<body> |
<div class= "wrap_top_nav" > |
<nav id= "top_nav" > |
<ul class= "inline-style clearfix" > |
<li><a href= "http://www.w3cplus.com" target= "_blank" >w 3 cplus</a></li> |
<li><a href= "http://www.w3cplus.com/resources/css3-tutorial-and-case" target= "_blank" >css 3 详解教程</a></li> |
<li><a href= "http://www.w3cplus.com/demos/list.html" target= "_blank" >css 3 实例</a></li> |
<li><a href= "http://www.w3cplus.com/demo/tags/242.html" target= "_blank" >藤藤每日一练</a></li> |
</ul> |
<a id= "read" href= "http://www.w3cplus.com/demo/css3-pictogram-button.html" target= "_blank" >查看原文>></a> |
</nav> |
</div> |
<div class= "page" > |
<header id= "header" > |
<hgroup class= "white blank" > |
<h 1 >CSS 3 Pictogram Button</h 1 > |
<h 2 >作者:大漠(如有更好建议或疑问请加群: 1041263 )</h 2 > |
</hgroup> |
</header> |
<section class= "demo" > |
<div data-for= "beveled" > |
<div> |
<a href= "javascript:void(0)" class= "button-bevel orange" > <span class= "refresh" ></span> Refresh </a> |
<a href= "javascript:void(0)" class= "button-bevel orange" > <span class= "shuffle" ></span> Shuffle </a> |
<a href= "javascript:void(0)" class= "button-bevel orange" > <span class= "preview" ></span> Preview </a> |
<a href= "javascript:void(0)" class= "button-bevel orange" > <span class= "tea" ></span> Tea </a> |
<a href= "javascript:void(0)" class= "button-bevel orange" > <span class= "wifi" ></span> Wifi </a> |
<a href= "javascript:void(0)" class= "button-bevel orange" > <span class= "locator" ></span> Locator </a> |
</div> |
<div> |
<a href= "javascript:void(0)" class= "button-bevel magenta" > <span class= "rss" ></span> Rss </a> |
<a href= "javascript:void(0)" class= "button-bevel magenta" > <span class= "cloud" ></span> Cloud </a> |
<a href= "javascript:void(0)" class= "button-bevel magenta" > <span class= "download" ></span> Download </a> |
<a href= "javascript:void(0)" class= "button-bevel magenta" > <span class= "trash" ></span> Trash </a> |
<a href= "javascript:void(0)" class= "button-bevel magenta" > <span class= "rack" ></span> Rack </a> |
<a href= "javascript:void(0)" class= "button-bevel magenta" > <span class= "map" ></span> Map </a> |
</div> |
<div> |
<a href= "javascript:void(0)" class= "button-bevel cyan" > <span class= "setting" ></span> Setting </a> |
<a href= "javascript:void(0)" class= "button-bevel cyan" > <span class= "identity" ></span> Identity </a> |
<a href= "javascript:void(0)" class= "button-bevel cyan" > <span class= "navigation" ></span> Navigation </a> |
<a href= "javascript:void(0)" class= "button-bevel cyan" > <span class= "gallery" ></span> Gallery </a> |
<a href= "javascript:void(0)" class= "button-bevel cyan" > <span class= "email" ></span> Email </a> |
<a href= "javascript:void(0)" class= "button-bevel cyan" > <span class= "users" ></span> Users </a> |
</div> |
<div> |
<a href= "javascript:void(0)" class= "button-bevel red" > <span class= "calendar" ></span> Calendar </a> |
<a href= "javascript:void(0)" class= "button-bevel red" > <span class= "link" ></span> Link </a> |
<a href= "javascript:void(0)" class= "button-bevel red" > <span class= "time" ></span> Time </a> |
<a href= "javascript:void(0)" class= "button-bevel red" > <span class= "folder" ></span> Folder </a> |
<a href= "javascript:void(0)" class= "button-bevel red" > <span class= "tag" ></span> Tag </a> |
<a href= "javascript:void(0)" class= "button-bevel red" > <span class= "share" ></span> Share </a> |
</div> |
<div> |
<a href= "javascript:void(0)" class= "button-bevel black" > <span class= "edit" ></span> Edit </a> |
<a href= "javascript:void(0)" class= "button-bevel black" > <span class= "upload" ></span> Upload </a> |
<a href= "javascript:void(0)" class= "button-bevel black" > <span class= "storage" ></span> storage </a> |
<a href= "javascript:void(0)" class= "button-bevel black" > <span class= "photo" ></span> photo </a> |
<a href= "javascript:void(0)" class= "button-bevel black" > <span class= "help" ></span> help </a> |
<a href= "javascript:void(0)" class= "button-bevel black" > <span class= "comment" ></span> comment </a> |
</div> |
<div> |
<a href= "javascript:void(0)" class= "button-bevel green" > <span class= "like" ></span> like </a> |
<a href= "javascript:void(0)" class= "button-bevel green" > <span class= "phone" ></span> phone </a> |
<a href= "javascript:void(0)" class= "button-bevel green" > <span class= "flag" ></span> flag </a> |
<a href= "javascript:void(0)" class= "button-bevel green" > <span class= "adduser" ></span> adduser </a> |
<a href= "javascript:void(0)" class= "button-bevel green" > <span class= "attach" ></span> attach </a> |
<a href= "javascript:void(0)" class= "button-bevel green" > <span class= "glass" ></span> glass </a> |
</div> |
</div> |
|
|
<div data-for= "rectangle" > |
<div> |
<a href= "javascript:void(0)" class= "button orange" > <span class= "refresh" ></span> refresh </a> |
<a href= "javascript:void(0)" class= "button orange" > <span class= "shuffle" ></span> shuffle </a> |
<a href= "javascript:void(0)" class= "button orange" > <span class= "preview" ></span> preview </a> |
<a href= "javascript:void(0)" class= "button orange" > <span class= "tea" ></span> tea </a> |
<a href= "javascript:void(0)" class= "button orange" > <span class= "wifi" ></span> wifi </a> |
<a href= "javascript:void(0)" class= "button orange" > <span class= "locator" ></span> locator </a> |
</div> |
<div> |
<a href= "javascript:void(0)" class= "button magenta" > <span class= "rss" ></span> rss </a> |
<a href= "javascript:void(0)" class= "button magenta" > <span class= "cloud" ></span> cloud </a> |
<a href= "javascript:void(0)" class= "button magenta" > <span class= "download" ></span> download </a> |
<a href= "javascript:void(0)" class= "button magenta" > <span class= "trash" ></span> trash </a> |
<a href= "javascript:void(0)" class= "button magenta" > <span class= "rack" ></span> rack </a> |
<a href= "javascript:void(0)" class= "button magenta" > <span class= "map" ></span> map </a> |
</div> |
<div> |
<a href= "javascript:void(0)" class= "button cyan" > <span class= "setting" ></span> setting </a> |
<a href= "javascript:void(0)" class= "button cyan" > <span class= "identity" ></span> identity </a> |
<a href= "javascript:void(0)" class= "button cyan" > <span class= "navigation" ></span> navigation </a> |
<a href= "javascript:void(0)" class= "button cyan" > <span class= "gallery" ></span> gallery </a> |
<a href= "javascript:void(0)" class= "button cyan" > <span class= "email" ></span> email </a> |
<a href= "javascript:void(0)" class= "button cyan" > <span class= "users" ></span> users </a> |
</div> |
<div> |
<a href= "javascript:void(0)" class= "button red" > <span class= "calendar" ></span> calendar </a> |
<a href= "javascript:void(0)" class= "button red" > <span class= "link" ></span> link </a> |
<a href= "javascript:void(0)" class= "button red" > <span class= "time" ></span> time </a> |
<a href= "javascript:void(0)" class= "button red" > <span class= "folder" ></span> folder </a> |
<a href= "javascript:void(0)" class= "button red" > <span class= "tag" ></span> tag </a> |
<a href= "javascript:void(0)" class= "button red" > <span class= "share" ></span> share </a> |
</div> |
<div> |
<a href= "javascript:void(0)" class= "button black" > <span class= "lock" ></span> lock </a> |
<a href= "javascript:void(0)" class= "button black" > <span class= "unlock" ></span> unlock </a> |
<a href= "javascript:void(0)" class= "button black" > <span class= "mic" ></span> mic </a> |
<a href= "javascript:void(0)" class= "button black" > <span class= "love" ></span> love </a> |
<a href= "javascript:void(0)" class= "button black" > <span class= "star" ></span> star </a> |
<a href= "javascript:void(0)" class= "button black" > <span class= "comment" ></span> comment </a> |
</div> |
<div> |
<a href= "javascript:void(0)" class= "button green" > <span class= "like" ></span> like </a> |
<a href= "javascript:void(0)" class= "button green" > <span class= "phone" ></span> phone </a> |
<a href= "javascript:void(0)" class= "button green" > <span class= "flag" ></span> flag </a> |
<a href= "javascript:void(0)" class= "button green" > <span class= "adduser" ></span> adduser </a> |
<a href= "javascript:void(0)" class= "button green" > <span class= "attach" ></span> attach </a> |
<a href= "javascript:void(0)" class= "button green" > <span class= "glass" ></span> glass </a> |
</div> |
</div> |
|
<div data-for= "rounded" > |
<div> |
<a href= "javascript:void(0)" class= "button rounded orange" > <span class= "edit" ></span> edit </a> |
<a href= "javascript:void(0)" class= "button rounded orange" > <span class= "upload" ></span> upload </a> |
<a href= "javascript:void(0)" class= "button rounded orange" > <span class= "storage" ></span> storage </a> |
<a href= "javascript:void(0)" class= "button rounded orange" > <span class= "photo" ></span> photo </a> |
<a href= "javascript:void(0)" class= "button rounded orange" > <span class= "help" ></span> help </a> |
<a href= "javascript:void(0)" class= "button rounded orange" > <span class= "locator" ></span> locator </a> |
</div> |
<div> |
<a href= "javascript:void(0)" class= "button rounded magenta" > <span class= "print" ></span> print </a> |
<a href= "javascript:void(0)" class= "button rounded magenta" > <span class= "gadget" ></span> gadget </a> |
<a href= "javascript:void(0)" class= "button rounded magenta" > <span class= "download" ></span> download </a> |
<a href= "javascript:void(0)" class= "button rounded magenta" > <span class= "trash" ></span> trash </a> |
<a href= "javascript:void(0)" class= "button rounded magenta" > <span class= "rack" ></span> rack </a> |
<a href= "javascript:void(0)" class= "button rounded magenta" > <span class= "map" ></span> map </a> |
</div> |
<div> |
<a href= "javascript:void(0)" class= "button rounded cyan" > <span class= "setting" ></span> setting </a> |
<a href= "javascript:void(0)" class= "button rounded cyan" > <span class= "identity" ></span> identity </a> |
<a href= "javascript:void(0)" class= "button rounded cyan" > <span class= "navigation" ></span> navigation </a> |
<a href= "javascript:void(0)" class= "button rounded cyan" > <span class= "gallery" ></span> gallery </a> |
<a href= "javascript:void(0)" class= "button rounded cyan" > <span class= "email" ></span> email </a> |
<a href= "javascript:void(0)" class= "button rounded cyan" > <span class= "users" ></span> users </a> |
</div> |
<div> |
<a href= "javascript:void(0)" class= "button rounded red" > <span class= "calendar" ></span> calendar </a> |
<a href= "javascript:void(0)" class= "button rounded red" > <span class= "link" ></span> link </a> |
<a href= "javascript:void(0)" class= "button rounded red" > <span class= "time" ></span> time </a> |
<a href= "javascript:void(0)" class= "button rounded red" > <span class= "folder" ></span> folder </a> |
<a href= "javascript:void(0)" class= "button rounded red" > <span class= "tag" ></span> tag </a> |
<a href= "javascript:void(0)" class= "button rounded red" > <span class= "share" ></span> share </a> |
</div> |
<div> |
<a href= "javascript:void(0)" class= "button rounded black" > <span class= "lock" ></span> lock </a> |
<a href= "javascript:void(0)" class= "button rounded black" > <span class= "unlock" ></span> unlock </a> |
<a href= "javascript:void(0)" class= "button rounded black" > <span class= "mic" ></span> mic </a> |
<a href= "javascript:void(0)" class= "button rounded black" > <span class= "love" ></span> love </a> |
<a href= "javascript:void(0)" class= "button rounded black" > <span class= "star" ></span> star </a> |
<a href= "javascript:void(0)" class= "button rounded black" > <span class= "comment" ></span> comment </a> |
</div> |
<div> |
<a href= "javascript:void(0)" class= "button rounded green" > <span class= "like" ></span> like </a> |
<a href= "javascript:void(0)" class= "button rounded green" > <span class= "phone" ></span> phone </a> |
<a href= "javascript:void(0)" class= "button rounded green" > <span class= "flag" ></span> flag </a> |
<a href= "javascript:void(0)" class= "button rounded green" > <span class= "adduser" ></span> adduser </a> |
<a href= "javascript:void(0)" class= "button rounded green" > <span class= "attach" ></span> attach </a> |
<a href= "javascript:void(0)" class= "button rounded green" > <span class= "glass" ></span> glass </a> |
</div> |
</div> |
</section> |
<section id= "ad_w3cplus" > |
<div class= "grid-ad" > |
<script type= "text/javascript" > |
/*250*250,创建于2012-10-14-3*/ |
var cpro_id = "u1089145" ; |
</script> |
<script src= "http://cpro.baidustatic.com/cpro/ui/c.js" type= "text/javascript" ></script> |
</div> |
<div class= "grid-ad" > |
<script type= "text/javascript" > |
/*250*250,创建于2012-10-14-2*/ |
var cpro_id = "u1089141" ; |
</script> |
<script src= "http://cpro.baidustatic.com/cpro/ui/c.js" type= "text/javascript" ></script> |
</div> |
<div class= "grid-ad" > |
<script type= "text/javascript" > |
/*250*250,创建于2012-10-11*/ |
var cpro_id = "u1086065" ; |
</script> |
<script src= "http://cpro.baidustatic.com/cpro/ui/c.js" type= "text/javascript" ></script> |
</div> |
<p><script type= "text/javascript" > |
var _bdhmProtocol = (( "https:" == document.location.protocol) ? " https://" : " http://" ); |
document.write(unescape( "%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F177319b798978621f83845b12c86fa29' type='text/javascript'%3E%3C/script%3E" )); |
</script> |
</p> |
</section> |
</div> |
</body> |
</html> |
初级程序员
by: 云代码会员 发表于:2015-09-18 17:13:48 顶(0) | 踩(0) 回复
可以使用在线按钮样式生成器:http://buttoncssgenerator.com 在线生成按钮css,支持各大主流浏览器,款式随心定制,也有丰富的示例可以选择
回复评论