a标签实现圆角水晶按钮

来源：互联网发布：php一维数组增加元素编辑：程序博客网时间：2024/05/16 05:53

1.用a标签实现圆角水晶按钮效果的重点在于：

用a标签包含一个span元素，都作为行内块元素显示
背景图片的制作(用PhotoShop制作)
光标移到标签上方时a标签和span元素显示的背景图片的位置进行变换

2.背景图制作(个人经验，仅供参考)：

打开Photoshop-->

新建一张300*160像素的透明画布-->

再新建一张300*40像素的透明画布-->

在第二张画布左边用圆角矩形工具绘制一个圆角矩形（矩形不能过长），作为路径载入-->

用渐变工具填充圆角矩形，填充时选择蓝色和淡蓝色，为使颜色分隔明显，将左右填充滑块都滑至中间-->

设置图像样式为内发光，发光色为白色，适当调整透明度和发光大小-->

将制作好的300*40像素的图像复制粘贴到300*160像素画布上。

其余部分制作方法相同。

直接上效果图。

3.代码示例：

<!DOCTYPE html><html language="en">  <head>  <title>圆角a标签 </title>  <meta charset="UTF-8">  <style>  a{  display:inline-block;  line-height:40px;  text-decoration:none;  background:url("btn-fit.png");  padding-left:20px;}  a span{  display:inline-block;  height:40px;  background:url('btn-fit.png') right -40px;  padding-right:20px;}  a:hover{  background:url('btn-fit.png') 0 -80px;}  a:hover span{  background:url('btn-fit.png') right -120px;}  </style>  </head>    <body>  <a href="javascript:;"> <span> 按钮按钮按钮按钮 </span></a>  </body></html>

注意：span元素显示图片的右边部分，这样就组合成了一个按钮。当按钮超过300px时，按钮背景图片会失真。

0 0