<!DOCTYPE html><head><title>超多的CSS3圆角渐变按钮</title><style type="text/css">body { background: #ededed; width: 900px; margin: 30px auto; color: #999;}p { margin: 0 0 2em;}h1 { margin: 0;}a { color: #339; text-decoration: none;}a:hover { text-decoration: underline;}div { padding: 20px 0; border-bottom: solid 1px #ccc;}.button { display: inline-block; zoom: 1; *display: inline; vertical...
之前为大家分享了推荐10款纯css3实现的实用按钮，今天给大家带来一款纯css3实现的颜色渐变按钮。这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变，效果非常好看，一起看下效果图：在线预览 源码下载实现的代码。html代码：<div class="container"><a target="_blank" class="btn green" href="http://www.w2bc.com/"><span>Nominate Yourself</span></a><a target="_blank" class="btn orange" href="http://www.w2bc.com...
a:link,a:visited{display:block;background-color:#98bf21;width:120px;text-align:center;padding:4px;text-decoration:none;}a:hover,a:active{background-color:#7A991A;} 原文：http://www.cnblogs.com/yufenghou/p/4201592.html
以前实现按钮一般都是用图片来实现的，特别是一些拥有质感的按钮，今天练习了一些相关方面的的例子，用css3来实现Social Media Buttons html代码如下 <div class="outset-colored"><ul><li> <a href=" " title="My E-Mail" class="email"> <img src="images/gmail_white.png" alt="gmail icon" /> <span class="site">E-Mail</span> </a> </li><li> <a href="#" title="My LinkedIn Page" class="linkedin"> <img src="images/link...
.ui-button {BORDER-LEFT-WIDTH: 0px; OVERFLOW: visible; CURSOR: pointer; FONT-SIZE: 16px; HEIGHT: 40px; BORDER-RIGHT-WIDTH: 0px; VERTICAL-ALIGN: middle; BORDER-BOTTOM-WIDTH: 0px; ZOOM: 1; FONT-WEIGHT: 700; COLOR: #fff; PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-TOP: 0px; PADDING-LEFT: 20px; FILTER: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘...
css3按钮<!doctype html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"><link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css"><script src="com/js/jquery.js" type="text/javascript"></s...
1、效果演示2、完整代码<!DOCTYPE html> <html> <head><title>Flip Button</title><style>.flip-button {/* 设置翻转按钮的大小，包括宽度（width）和高度（height） */width: 240px;height: 60px;/* 为 transform 属性设置过渡效果，作用时间为 0.8s */transition: transform 0.8s;-webkit-transition: -webkit-transform 0.8s;/* 规定在三维空间中保留嵌套元素的空间位置 */transform-style: preserve-3d;-webkit-transform-styl...
这里讲下如何利用css3里的两个新属性 box-shadow和transition来实现如下所示的带有阴影和颜色渐变效果的按钮(下面这个只是图片；本想直接在这个页面下嵌html的,,试了后发现有些css样式貌似不给用就只能放图片了...=_=)： 首先是box-shados语法,用于向框添加一个或多个阴影：box-shadow: h-shadowv-shadowblurspreadcolor inset;值描述h-shadow必须。水平阴影的位置v-shadow必须。垂直阴影的位置blur可选。模糊距离spread可...
在线演示本地下载原文：https://www.cnblogs.com/lovellll/p/10105307.html
复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Demo: CSS3 Buttons</title> <style type="text/css"> body { background: #ededed; width: 900px; margin: 30px auto; color: #999; } p { ma...
1 案例2. HTML 代码<div class="arrow arrow-left-middle">arrow-left-middle </div><div class="arrow arrow-left-top">arrow-left-top </div><div class="arrow arrow-left-bottom">arrow-left-bottom </div><div class="arrow arrow-left-middle-move">arrow-left-middle-move </div><div class="arrow arrow-left-top-move">arrow-left-top-move </div><div class="arrow arrow-left-bottom-move">arrow-left-bottom-move </di...
工作之余写的一个类似于QQzone的菜单效果先上截图：图一为点击按钮前界面：图二为点击按钮后的界面下面上代码：<!--css部分--> <style type="text/css"> @font-face {font-family:‘Raphaelicons‘;src:url(font/raphaelicons-webfont.svg) format(‘svg‘),url(font/raphaelicons-webfont.woff) format(‘woff‘);font-weight:normal; } * {margin:0;padding:0;border:0;list-style:none;}html, body, #container{width:100%;heig...
如果你经常活跃在一些社交网站上，那么你肯定会看到过很多形式各异的分享按钮，目前由于HTML5和CSS3的普及，很多分享按钮也都应用了CSS3样式，甚至会有很多带有动画的CSS3分享按钮。本文就向大家介绍了9款经典华丽的CSS3分享按钮，以及它们的源代码，希望能给各位开发者带来一定的帮助。1.jQuery/CSS3实现超酷的分享按钮今天要分享的这款分享按钮是基于CSS和jQuery的，按钮比较大，非常大气。在线演示源码下载2.jQuery交互式分享按...
按钮靠右style="float:right" ,多按钮排版会相反 按钮内的字体靠右style="text-align:right" 按钮离右边框距离style="margin-right: 20px"原文：http://www.cnblogs.com/ignacio/p/5066598.html
就是做到类似于下图这种效果通过简单的Css样式就可以实现<div style="margin:0 auto;width:200px;"><input class="submit" id="btn" type="submit" value="注册" /> </div>使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐。 .style{margin-left:auto;margin-right:auto;} 缩写形式为： .style{margin:0 auto;} 数字0 表示上下边距是0。可以按照需要设置成不同的值。 后面的那个width也是个很重要的属性，因为按钮的...