Rumah > Artikel > hujung hadapan web > 用CSS实现的一张图完成的按钮实例

用CSS实现的一张图完成的按钮实例

墨辰丷asal: 2018-05-09 18:23:041902semak imbas

本篇文章主要介绍如何用CSS实现的一张图完成的按钮实例，很好用很奥妙,值得收藏和分享通过css来读取图片坐标系实现局部背景图，感兴趣的小伙伴参考一下。

网易126登录按钮代码如下：

<style> 
.inp_L1,.inp_L2,{background:url(/upload/20080515201218970.jpg) no-repeat} 
.inp_L1{ width:67px; height:23px; background-position:-4px -4px; border:0; color:#464646; line-height:23px} 
.inp_L2{ width:67px; height:23px; background-position:-4px -30px; border:0; color:#464646; line-height:23px} 
</style> 
<input type="submit" value="登 录" class="inp_L1" onMouseOver="this.className=&#39;inp_L2&#39;" onMouseOut="this.className=&#39;inp_L1&#39;" id="input_btn1"  name="enter.x" tabindex="4">

导航按钮代码如下：

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>用CSS实现的一张图完成的导航条</title> 
<style> 
ul,li{ list-style:none; float:left;} 
body{ font-size:12px; line-height:1.6; font-family:Verdana, "宋体", Arial; text-align:center;} 
#info li{ margin-left:4px; margin-top:15px;} 
#info a {display:block;text-align:center; padding-left:15px; 
padding-top:2px;padding-bottom:1px;background-image:  
url(/upload/20080515201218783.GIF); 
background-repeat: no-repeat;color: #000; width:47px; cursor:hand; text-decoration: none;} 
#job a:link,#job a:visited{background-position: -62px 0px;} 
#eve a:link,#eve a:visited{background-position: -124px 0px;} 
#oth a:link,#oth a:visited{background-position: -186px 0px;} 
#car a:hover ,#car a:active {background-position: 0px -22px; color:#fff;} 
#job a:hover ,#car a:active {background-position: -62px -22px; color:#fff;} 
#eve a:hover ,#car a:active {background-position: -124px -22px; color:#fff;} 
#oth a:hover ,#car a:active {background-position: -186px -22px; color:#fff;} 
</style> 
</head> 
<body>  
<div id="info"> 
 <ul> 
  <li id="car"><a href="#" target="_blank"><span> 
 游 戏</span></a></li> 
  <li id="job"><a href="#" target="_blank"><span> 
 娱 乐</span></a></li> 
  <li id="eve"><a href="#" target="_blank"><span> 
 菜 单</span></a></li> 
  <li id="oth"><a href="#" target="_blank"><span> 
 好 玩</span></a></li>    
 </ul>  
</div> 
</body> 
</html>

相关推荐：

CSS实现3D按钮效果

AngularJS开发WebApp实现高亮跳转按钮效果，ui-sref和ui-sref-active的使用方法

css3实现3D按钮效果的文章推荐

CSS3展现横向滚动菜单按钮效果代码

Atas ialah kandungan terperinci 用CSS实现的一张图完成的按钮实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：如何做到不用图片用css实现按钮的美化Artikel seterusnya：css动画教程

Artikel berkaitan

Lihat lagi