www.gusucode.com > 收集几款漂亮的CSS3按钮美化例子源码程序 > 收集几款漂亮的CSS3按钮美化例子/CSSButtonsPseudoElements/CSSButtonsPseudoElements/css/demo.css
@font-face { font-family: 'BebasNeueRegular'; src: url('fonts/BebasNeue-webfont.eot'); src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/BebasNeue-webfont.woff') format('woff'), url('fonts/BebasNeue-webfont.ttf') format('truetype'), url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal; font-style: normal; } /* CSS reset */ html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } fieldset,img { border:0; } ol,ul { list-style:none; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } /* General Demo Style */ body{ font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif; background: #f8f8f8 url(../images/bg.jpg) repeat top left; font-weight: 400; font-size: 15px; color: #416c80; overflow-y: scroll; overflow-x: hidden; } .ie7 body{ overflow:hidden; } a{ text-decoration: none; } .container{ width: 100%; position: relative; text-align: center; } .clr{ clear: both; } .container > header{ padding: 20px 30px 10px 30px; margin: 0px 20px 10px 20px; position: relative; display: block; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); text-align: center; } .container > header h1{ font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 35px; line-height: 35px; position: relative; font-weight: 400; color: #186f8f; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); padding: 0px 0px 5px 0px; } .container > header h1 span{ color: #2ea2cd; text-shadow: 0px 1px 1px rgba(255,255,255,0.8); } .container > header h2, p.info{ font-size: 16px; font-style: italic; color: #4a3124; text-shadow: 0px 1px 1px rgba(255,255,255,1); } /* Header Style */ .codrops-top{ font-family:'Arial Narrow', Arial, sans-serif; line-height: 24px; font-size: 11px; background: #000; opacity: 0.9; text-transform: uppercase; z-index: 9999; position: relative; -moz-box-shadow: 1px 0px 2px #000; -webkit-box-shadow: 1px 0px 2px #000; box-shadow: 1px 0px 2px #000; } .codrops-top a{ padding: 0px 10px; letter-spacing: 1px; color: #ddd; display: block; float: left; } .codrops-top a:hover{ color: #fff; } .codrops-top span.right{ float: right; } .codrops-top span.right a{ float: none; display: inline; } .codrops-demos{ text-align:center; display: block; line-height: 30px; padding: 20px 0px; } .codrops-demos a{ display: inline-block; margin: 0px 4px; padding: 0px 4px; color: #fff; line-height: 20px; font-style: italic; font-size: 13px; border-radius: 3px; background: rgba(41,77,95,0.1); -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .codrops-demos a:hover{ background: rgba(41,77,95,0.3); } .codrops-demos a.current, .codrops-demos a.current:hover{ background: rgba(41,77,95,0.3); } #container_buttons{ width: 400px; margin: 0 auto; background: rgba(255,255,255,0.3); padding: 60px 60px 30px; border-radius: 20px; box-shadow: 1px 1px 1px rgba(0,0,0,0.09) inset; } #container_buttons p{ display:block; padding-bottom:60px; } /* Media Queries */ @media screen and (max-width: 767px) { .container > header{ text-align: center; } p.codrops-demos { position: relative; top: auto; left: auto; } }