<a>按钮样式

网页上有很多功能是通过链接方式传递参数,这种功能链接普通样式就是一个超链接 退出,如果将超链接的样式变成按钮样式,给用户的感觉会更好。

一种方法是给a标签添加display:block的样式,并添加hover样式。

<style type="text/css">
div.container
{
width: 600px;
/*height: 200px;*/
border-bottom: 2px solid green;
padding: 10px;
}
.container a,.container a:link,.container a:visited
{
display: block;
float: left;
margin-right: 5px;
background: #ED2B34;
padding: 5px;
text-decoration: none;
font-size: 12px;
font-family: ‘宋体‘;
color:#fff;
}
.container a:hover
{
display: block;
float: left;
margin-right: 5px;
background: #C30A13;
padding: 5px;
text-decoration: none;
font-size: 12px;
font-family: ‘宋体‘;
color:#ccc;
}
.clear
{
clear: both
}
</style>
<div class=‘container‘>
<p>微信公众平台开发(2)扫描二维码添加公众账号</p>
<a href="http://www.cnblogs.com/birdskyws/p/3912719.html">跳转链接1</a><a href="http://www.cnblogs.com/birdskyws/p/3910493.html">跳转链接2</a>
<div class="clear"></div>
</div>

普通样式:

hover样式:

<a>按钮样式

时间: 2024-11-08 17:25:30

<a>按钮样式的相关文章

safari下按钮样式失效

这两天遇到一个问题,页面在安卓手机里面正常显示,但是在IOS里面按钮的样式完全失效了,一番了解之后才知道是 appearance属性 的原因. 在原来的样式里面加上一行"-webkit-appearance : none ;",IOS下的按钮样式立马显示出来了 #btn{width:80%; padding:2% 0; color:#fff; font-family: 'kaiti'; background:#F3AA3B; border:none;     -webkit-borde

uploadify 自定义按钮样式

uploadify是一款不错的JQUERY上传插件,但是FLASH按钮的外挂往往跟我们网页的设计不太搭配.一开始我还试图反编译uploadify.swf来修改其外观,结果发现反编译为FLA后里面没有任何图片资源. 原来,这个按钮是用CSS绘制的.代码文件是uploadify.css. 打开这个文件后,你会看见CSS设置的按钮样式.OK,现在想修改就很简单了,不论你是写一段新的CSS还是替换成图片都可以的. 我懒省事,就直接用图片作为按钮背景了. 代码: .uploadify-button { b

[HTML/CSS]uploadify自定义按钮样式

概述 在项目中经常用到uploadify上传插件,但是FLASH按钮的外观往往跟我们网页的设计的主题色不太搭配.这时就需要对其样式进行修改. 样式文件是uploadify.css. 打开这个文件后,你会看见CSS设置的按钮样式. 1 .uploadify-button { 2 background-color: #505050; 3 background-image: linear-gradient(bottom, #505050 0%, #707070 100%); 4 background-

完成FileUpload的文件上传功能,且可改按钮样式

FileUpload控件: 更改按钮样式思路: 自己定义一个按钮,设置该按钮的样式,然后将FileUpload控件通过定位定在自己定义的按钮上面,设置z-index,使得控件浮在自己定义的按钮上面,记得设置该控件为透明,这样,看着点的是自己定义的那个按钮,实际上点击的是控件,然后定义一个"上传"按钮,点击上传按钮时进入代码层: 上传文件思路: 1)确定上传文件所保存的路径: 2)判断路径是否存在,存在则继续,不存在则创建: 3)获取上传文件的上传路径 或者文件名 4)保存文件: 多文件

一种好看的HTML按钮样式

发现一种简洁好看的 <input type="submit" value="Register" /> 按钮样式. 样式预览 CSS代码 form input[type=submit]{ border: 1px solid #004C9B; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0

改变滑动删除按钮样式

在自定义 cell 中实现如下代码: // 改变滑动删除按钮样式 - (void)layoutSubviews { [super layoutSubviews]; for (UIView *subView in self.subviews){ if([subView isKindOfClass:NSClassFromString(@"UITableViewCellDeleteConfirmationView")]) { CGRect cRect = subView.frame; cRe

a span做成按钮样式不选中文字

a,span做成按钮样式时,文字会被选中.加以下CSS可以让其不选中.测试三大浏览器都可以 .button { display: inline-block; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } 示例如下 选择时,选不中 按钮a 按钮span 不加时,可以选中 不加

CSS3 3D分页按钮样式

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>石家庄礼品公司</title><style>.ui-page{border: 0px;background: #37578C;background: -webkit-linear-gradient(#37578C, #608BAE);background: -moz-linear-grad

按钮样式加载等待

使用插件Ladda,基于bootstrap的样式实现加载等待的效果: 首先引用.css以及.js文件: <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="dist/ladda-themeless.min.css"> <script src="dist/spin.min.js&

WinForm------TreeList修改节点图标和按钮样式

转载: https://documentation.devexpress.com/#WindowsForms/DevExpressXtraTreeListTreeList_CustomDrawNodeButtontopic 1.修改节点图标 (1)拖入TreeList控件(这里如何加载数据就不多说了哈)和ImageLIst控件 a.给ImageList添加图像 b.修改TreeList控件的属性 (2).在属性栏找到TreeList控件的CustomDrawNodeImages事件,并添加以下代