Question

我使用锚标记创建了一个HTML按钮，该标记由三个图像组成，如下所示：

<body>
    <ul>
        <li>
            <a href="#" class="my_button">
                <div style="width:77px">
                    <div class="left"></div>
                    <div class="middle">Log In</div>
                    <div class="right"></div>
                </div>
            </a>
        </li>
    </ul>
</body>

结果按钮如下：

button image

我的CSS代码：

.my_button .left {
    background: url("./images/left.png") left center no-repeat;
}

.my_button .right {
    background: url("./images/right.png") left center no-repeat;
}

.my_button .middle {
    color:#FFFAF0;
    background: url("./images/middle.png") repeat-x;
}

有没有更好的方法来创建组成三个图像的按钮？因为我必须在我的页面中创建10个按钮，如果我按照上述方法选择10个按钮，将会有重复的代码。你有什么建议吗？

Answer 1

您可以将所有图像合并到一个名为Sprite的图像中。然后，您可以使用background-position属性根据需要对齐它们。

使用CSS Sprite的优点是，如果您创建10个图像，那么您只需要为图像发出一个http请求，而不是10个http请求。这是一种巨大的性能优化技术。

您也无需担心旧浏览器，因为所有浏览器都支持background-position。

Answer 2

您需要什么样的浏览器支持？优雅的降级你还好吗？（即在旧版浏览器中按钮看起来并不完全相同，但仍能正常运行）。

使用伪元素

使用这些，您只需要一个html元素，其余的可以用CSS

完成

.my_button:before {
        content:'';
        background: url("./images/left.png") left center no-repeat;
        position:absolute;
        left:0;
        height:XXpx;
        width:XXpx;
    }

    .my_button:after {
        content:'';
        background: url("./images/right.png") left center no-repeat;
        position:absolute;
        right:0;
        height:XXpx;
        width:XXpx;
    }

    .my_button .middle {
        color:#FFFAF0;
        background: url("./images/middle.png") repeat-x;
    }

在上面的代码中，XXpx应该是背景图像元素的高度和宽度

或与CSS3

这将是一个更好的方法：只需使用CSS3设置按钮的样式：

.my-button {
    border-radius:5px; /* don't forget browser prefixes */
    padding:Xpx;
    border:solid 1px blue;
    /* code for css gradient */
}

an example

Use CSS Gradient Generator

这种方式在所有浏览器中都不起作用，相反，用户会看到没有border-radius和没有渐变的登录按钮，但它仍然可以正常工作。

Answer 3

我建议使用CSS3。

.mybutton{ width:120px; border-radius:5px; background:#c3c3c3; padding:5px; }

你将可以使用任何当前的CSS类。

Answer 4

这是一种方式：

首先整理你的html，只使用普通类的普通锚：

<ul>
    <li> <a href="#" class="my_button">Log In</a></li>
    <li> <a href="#" class="my_button">Other Function</a></li>
    <li> <a href="#" class="my_button">Extra Function</a></li>
</ul>

然后使用一些jQuery为该类的每个锚插入额外的div：

$("a.my_button").html(function (i, oldHtml) {
  return '<div style="width:' + ($(this).width()+40) + 'px"><div class="left"></div>' +
         '<div class="middle">' + oldHtml + '</div>' +
         '<div class="right"></div></div>';
});

（如果你将函数传递给.html()，它将被重复调用，每个匹配元素一次，函数返回成为当前元素的新html。）

Answer 5

因为我很懒，我会用......像那样

function addButton(id, href, text){
   $('ul').append('<li><a id="' + id + '" href="' + href + '" class="my_button"<div style="width:77px"><div class="left"></div><div class="middle">' + text + '</div><div class="right"></div></div></a></li>');
}

addButton('bLogin','#','Log In');
addButton('bThis','#','This');
addButton('bThat','#','That');

Answer 6

您可以使用称为sliding doors效果的内容将其缩小为2张图像。你也制作了一个带有超宽中间背景的左帽图像。然后你制作第二个右图像。

左/中间图像进入外部div，然后进入具有右上角图像的div。

http://alistapart.com/article/slidingdoors

他们在帖子上指出这不再是最佳做法。如果你正在做图形背景并且不能依靠CSS3效果来构建你的按钮，我仍然会说这是一个很棒的技巧。它可能只是一个自动通知，因为文章的年龄太旧了（2003）。

正如本页其他地方所建议的那样，您可以使用CSS Sprites将其缩小为一个物理图像。

进一步挖掘这个小费是从2012年开始，结合了精灵+推拉门：

http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/

Answer 7

您可以简单地使用“button”元素。我不完全确定你想要达到的目标，但是你可以给同一个10级按钮。

HTML：

<button class="myButton" onClick="location.href='myPage.html'")>Log In</button>
<button class="myButton" onClick="location.href='anotherPage.html'")>Next Link</button>

CSS：

.myButton{
   background-image:url("image.jpg");
}

.myButton:hover{
   background-image:url("hover.jpg");
}

我可能完全偏离你想要达到的目标，但这对我认为你想要实现的目标是有效的。

您也可以根本不设置按钮的样式并自行获得漂亮的悬停效果，但在每个浏览器中都不一样。

你也可以像你拥有的那样使用常规的锚标签，给它们一个适用于所有按钮的类：

<a class="myButton" href="myPage.html">Log In</a>
<a class="myButton" href="anotherPage.html">Link 2</a>

哦，如果你不想做任何这些，只需保持你的按钮与现在一样，只需复制你的HTML，改变锚链接到的位置和文本，如下所示：

<body>
    <ul>
        <li>
            <a href="#" class="my_button">
                <div style="width:77px">
                    <div class="left"></div>
                    <div class="middle">Log In</div>
                    <div class="right"></div>
                </div>
            </a>
        </li>
        <li>
            <a href="#1" class="my_button">
                <div style="width:77px">
                    <div class="left"></div>
                    <div class="middle">Different link</div>
                    <div class="right"></div>
                </div>
            </a>
        </li>
        <li>
            <a href="#2" class="my_button">
                <div style="width:77px">
                    <div class="left"></div>
                    <div class="middle">Another link.</div>
                    <div class="right"></div>
                </div>
            </a>
        </li>
    </ul>
</body>

添加PHP解决方案。

的functions.php：

<?php 
    function myButton($link, $title){
     echo  '<a href="'.$link.'" class="my_button">
            <div style="width:77px">
                <div class="left"></div>
                <div class="middle">'.$title.'</div>
                <div class="right"></div>
            </div>
        </a>';
    }
?>

您的新页面将是page.php（不是HTML）

page.php文件：

<?php
include_once 'functions.php';
?>
<body>
        <ul>
            <li>
             <?php myButton('link.html', 'Click Me') ?>
            </li>
            <li>
             <?php myButton('anotherlink.html', 'No, Click Me!') ?>
            </li>
        </ul>
</body>

这将允许您减少代码，同时保持当前结构。它还允许您键入一行代码并动态添加按钮。

如果您想了解更多信息，请与我们联系。

Answer 8

更好的方法是使用css创建按钮：

a.button {
    text-decoration: none;
    background: #FFF;
    padding: 5px 10px;
    border: 1px solid #CCC;

    /* Adding Vendor Prefixes to ensure the best browser support 
       -moz-    : Gecko based browsers
       -webkit- : WebKit implementations
       -ms-     : Internet explorer's
       -o-      : Opera
    */

    /* Background Gradient */
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #F9F9F9), color-stop(100%, #E9E9E9));
    background-image: -webkit-linear-gradient(top, #F9F9F9, #E9E9E9);
    background-image: -moz-linear-gradient(top, #F9F9F9, #E9E9E9);
    background-image: -o-linear-gradient(top, #F9F9F9, #E9E9E9);
    background-image: linear-gradient(top, #F9F9F9, #E9E9E9);

    /* Gradient for IE6+ */
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f9f9f9', endColorstr='#e9e9e9');

    /* Border radius */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

但是如果你喜欢让internet explorer 6-9能够渲染border-radius或其他CSS3装饰，你可以包含CSS3PIE：

http://css3pie.com/

重新使用现有的按钮代码在html中创建许多按钮？

8 个答案: