Question

我有以下按钮：

我想在＆＃39;邀请你的朋友＆＃39;旁边添加一个加载微调器。文本。我该怎么办？微调器是here。

这个微调器是否会成为按钮内的div？或者最简单的方法是什么？我还想按下按钮来显示微调器。

这是我的简单按钮：

 <button id="inviteYourFriends" class="arvo-bold button blue" >
            Invite your friends
        </button>

Answer 1

如果按钮位于相对位置，则可以将微调器完全放在按钮内：

http://jsfiddle.net/TU6vQ/8/

HTML：

<button id="inviteYourFriends" class="arvo-bold button blue" style='position:relative'>
     <img src="http://www.gifstache.com/images/ajax_loader.gif" class='spinner'/>
            Invite your friends
</button>

CSS：

.spinner { 
    position: absolute; 
    right: 5px; 
    top: 6px; 
    width: 25px; 
    height: 25px;
    display: none;
}

JS：

$('button#inviteYourFriends').click(function() {$('.spinner').show();});

Answer 2

将微调器放在按钮内，给它绝对定位，并在按钮上设置相对位置。该按钮是块级元素，您不需要额外的div。

Answer 3

我更新了jsfiddle here：

<div style='position:relative'>
    <img src='http://www.gifstache.com/images/ajax_loader.gif' style='position:absolute; width:16px; margin:10px 10px; height:16px;' />
<button id="inviteYourFriends" class="arvo-bold button blue" >
            Invite your friends
        </button>
</div>

Answer 4

button标记可以像几乎任何其他元素一样支持img标记，因此您需要做的就是将图像放在其中;听起来很简单。

 <button id="inviteYourFriends" class="arvo-bold button blue" >
            <img src="http://www.gifstache.com/images/ajax_loader.gif" height=10> Invite your friends
        </button>

在按钮上单击，只需在按钮内容前加上图像即可。瞧。

Answer 5

你可以这样做。

http://jsfiddle.net/YQNn4/

HTML

<img class="progress" src="http://www.gifstache.com/images/ajax_loader.gif" height="20px" width="20px" alt=""> 
<button id="inviteYourFriends" class="arvo-bold button blue" >
            Invite your friends
</button>

JS

$(document).ready(function(){
    $('.progress').hide();
    $('#inviteYourFriends').click(function(){
        $('.progress').show();
    });
});

Answer 6

我会在按钮元素中添加图像，然后使用css定位和调整大小。这是jfiddle：http://jsfiddle.net/TU6vQ/9/

这是代码：

<button id="inviteYourFriends" class="arvo-bold button blue" >
            Invite your friends
        <img src="http://www.gifstache.com/images/ajax_loader.gif" alt="..." class="spinner"/>
        </button>

CSS：

.button {
    line-height: 52px;
    font-size: 16px;
    width: 270px;
    height: 50px;

     text-shadow: -1px -1px 1px rgba(175,175,175,.42);
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    line-height: 38px;
    color: #fefefe;
    font-size: 14px;
    display: block;
    height: 38px;
    border: 0;

    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;

    -webkit-background-clip: padding-box;
       -moz-background-clip: padding;
            background-clip: padding-box;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

    -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,.1); 
       -moz-box-shadow: 1px 2px 2px rgba(0,0,0,.1);
            box-shadow: 1px 2px 2px rgba(0,0,0,.1);
}

.button.blue {
    background: rgb(169,191,200);
    background: -moz-linear-gradient(top,  rgba(169,191,200,1) 0%, rgba(169,191,200,1) 51%, rgba(143,170,182,1) 54%, rgba(143,170,182,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,191,200,1)), color-stop(51%,rgba(169,191,200,1)), color-stop(54%,rgba(143,170,182,1)), color-stop(100%,rgba(143,170,182,1)));
    background: -webkit-linear-gradient(top,  rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
    background: -o-linear-gradient(top,  rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
    background: -ms-linear-gradient(top,  rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
    background: linear-gradient(to bottom,  rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
}

.spinner
{  
    margin-top:8px;
    margin-left:5px;
    height:20px;
    width:20px;
    position:absolute;
}

在按钮内添加进度指示器

6 个答案: