给超链接A添加按钮样式

在进行界面设计过程中,需要给超链接A添加按钮样式,原本以为是利用height和width分别控制高度和宽度,然后利用background来设置背景图片就可以了。没想到在实际测试过程中,根本不行。于是就只好利用padding方法进行微调,最终得到理想效果,css代码如下:

 

 .Pager
    
{
        margin
: 10px ;
        text-align
: right ;
        font-weight
: bold ;
    
}
    .Pager a
    
{
        color
: Red ;
        padding-top
: 5px ;
        padding-bottom
: 9px ;
        padding-left
: 20px ;
        padding-right
: 20px ;
        background
: url(images/loginButton.gif) no-repeat ;
        
    
}
    .Pager a:hover
    
{
        color
: Blue ;
        text-decoration
: none ;
    
}
    .Pager a:visited
    
{
        text-decoration
: none ;
        font-size
: 12px ;
        color
: Red ;
    
}

最终得到的效果如下:

给超链接A添加按钮样式

 

参照一楼给的建议,我修改代码如下:

 

    .Pager a
    
{
        color
: Red ;
       <%-- padding-top
: 5px ;
        padding-bottom
: 9px ;
        padding-left
: 20px ;
        padding-right
: 20px ; --%>
        width
: 77px ;
        height
: 27px ;
        display
: block ;
        text-align
: center ;
        line-height
: 27px ;
        float
: left ;
        background
: url(images/loginButton.gif) no-repeat ;
        
    
}

 

谢谢@倾斜的水瓶座提醒。

pS:博客园编辑好垃圾,这篇文章编写过程中,浏览器死了两次,晕啊 。。。。。不是一般的不给力。

你可能感兴趣的:(超链接)