如何製作具有不同部件的按鈕？

我想製作一個按鈕，看起來類似於您想要加入服務器時點擊的Club Penguin按鈕。如何製作具有不同部件的按鈕？

在這張圖片中，你看到的按鈕有三個主要部分，表情符號，名稱，和人玩的量。

如何製作與多個部件類似的按鈕？或者一個div會更好嗎？無論哪種方式，我希望用戶能夠點擊它。

這是我試過的，但我有困難。

<div id="container"> 
    <button id="button"> 
    <div id="first"> 
     Emoji 
    </div> 
    <div id="second"> 
     Name 
    </div> 
    <div id="third"> 
     Player count 
    </div> 
    </button> 
</div>

CSS：

#button { 
    width:400px; 
} 
#first { 
    float:left; 
} 
#second { 
    float:center; 
} 
#third { 
    float:right; 
}

https://jsfiddle.net/rmozk80x/

來源

2017-04-02 Ryan Smith

如果你希望它有一個動作，爲什麼不這樣加上'onclick'事件處理程序：'<按鈕ID = 「按鈕」的onclick = 「警報（ 'somestring'）」 >' – Everyone

現在不擔心行動，只是想讓它看起來好像在圖片中 –

您可以使用** Bootstrap Framework **用於此目的 –

如果您需要類似的東西，您可能會覺得這很有幫助。

內聯塊顯示會讓您更好地控制流量。此外，你可以使它成爲一個div並使用cursor: pointer;使它懸停在它看起來好像它是一個按鈕。

 #button { 
 
     width:400px; 
 
     height: 50px; 
 
     border: 3px solid lightblue; 
 
     border-radius: 25px; 
 
     background: darkblue; 
 
     cursor: pointer; 
 
     color: white; 
 
     font-wieght: 105%; 
 
     font-family: Consolas; 
 
     } 
 

 
     #first { 
 
     float:left; 
 
     margin-left: 5px; 
 
     margin-top: 3px; 
 
     display: inline-block; 
 
     } 
 

 
     #second { 
 
     display: inline-block; 
 
     margin-left: 10px; 
 
     margin-top: 15px; 
 
     } 
 
     #third { 
 
     display: inline-block; 
 
     float:right; 
 
     margin-top: 15px; 
 
     margin-right: 30px; 
 
     }

<div id="container"> 
 
    <div id="button" onclick="alert('you clicked me!')"> 
 
    <div id="first"> 
 
     <img src="http://cdn.hercampus.com/s3fs-public/styles/full_width_embed/public/2015/04/12/persons-0004_large.png" alt="Smiley face" height="42" width="42"> 
 
    </div> 
 
    <div id="second"> 
 
     Name 
 
    </div> 
 
    <div id="third"> 
 
     Player count 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-04-02 06:13:48 Everyone

你可以刪除float：center，因爲它沒有效果（因爲它不是東西） – Charlie

@Charlie真的，我編輯他的代碼，以便滑落，感謝評論 – Everyone

NP =）它看起來像做某事，因爲它的中心默認。 – Charlie

試試這個：

#button { 
width:400px; 
} 

#first { 
float:left; 
width: 33%; 
text-align: left; 
background-color: 
} 

#second { 
float:left; 
text-align: center; 
} 
#third { 
float:right; 
}

不居中二，但對齊離開，並根據需要對齊的內容。您也可以調整第一個div的寬度。

來源

2017-04-02 06:00:12

我不推薦使用的HTML元素。相反，您可以將JavaScript事件偵聽器添加到定義包含可點擊內容的div中。該內容可以按照您的選擇進行設計。以下是我如何解釋你的場景。

var emojiAction = document.getElementById('first'); 
 

 
emojiAction.addEventListener('click', function() { 
 
    alert('Hello world'); 
 
}, false); 
 

 
var nameAction = document.getElementById('second'); 
 

 
nameAction.addEventListener('click', function() { 
 
    alert('Hello name'); 
 
}, false); 
 

 
var playerCountAction = document.getElementById('third'); 
 

 
playerCountAction.addEventListener('click', function() { 
 
    alert('x Players Online!'); 
 
}, false);

#buttonContainer { 
 
    width:100%; 
 
    height:20px; 
 
    background-color:#999; 
 
    text-align:center; 
 
    bottom:0; 
 
    position: fixed; 
 
    margin: 0 auto; 
 
    padding:15px; 
 
} 
 

 
#first { 
 
    width: calc(33% - 10px); 
 
    height: 20px; 
 
    float: left; 
 
    margin-left: 10px; 
 
} 
 

 
#second { 
 
    width: calc(33% - 10px); 
 
    height: 20px; 
 
    float: left; 
 
    margin-left: 10px; } 
 

 
#third { 
 
    width: calc(33% - 10px); 
 
    height: 20px; 
 
    float: left; 
 
    margin-left: 10px; 
 
}

<div id="buttonContainer"> 
 
    <div id="first"> 
 
    Emoji 
 
    </div> 
 
    <div id="second"> 
 
    Name 
 
    </div> 
 
    <div id="third"> 
 
    Player Count 
 
    </div> 
 
</div>

來源

2017-04-02 06:30:27 wykydtronik

如何製作具有不同部件的按鈕？

回答

相關問題