背景图片+css实现腾讯新浪微博关注按钮

作者：管理员

发布时间：2013/8/18 1:45:12

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=317

今天又收集了一个css实用功能，就是背景图片+css实现腾讯新浪微博关注按钮，非常好实，平时网站上也常用到，于是就整理出来分享给大家用，希望可以帮到jquery学堂的成员和前端开发的网友们，文章后面带上例子的演示和打包下载。

步骤如下：

1、准备好一张微博按钮图片：

2、样式代码如下：

.buttons {
    width: 132px;
    height: 56px;
    margin: 34px auto 0;
}
.buttons a {
    float: left;
    display: inline;
    width: 56px;
    height: 56px;
    margin-right: 20px;
    background: url(weibo_login_btns.png) no-repeat;
}
.buttons .sina:hover {
	background-position: 0 -57px;
}
.buttons .qq {
    margin: 0;
    background-position: -57px 0;
}
.buttons .qq:hover { 
	background-position: -57px -57px;
}

3、html代码如下：

<div class="buttons">
	<a href="http://www.jq-school.com" class="sina"></a>
	<a href="http://www.jq-school.com" class="qq"></a>
</div>

就算没有任何基础的网友，经以上步骤，便可大功造成。

关键字：css技巧 css按钮 腾讯微博 新浪微博 关注按钮