CSS設(shè)置兩個不同大小的按鈕

在CSS中，我們可以使用不同的方法設(shè)置兩個不同大小的按鈕，以下是一個簡單的示例，展示了如何為兩個按鈕分別設(shè)置大小和樣式：

1、HTML結(jié)構(gòu)：

<div class="button-container">
    <button class="large-button">大按鈕</button>
    <button class="small-button">小按鈕</button>
</div>

2、CSS樣式：

.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.large-button {
    width: 200px;
    height: 50px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    text-align: center;
    font-size: 18px;
}
.small-button {
    width: 100px;
    height: 30px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    text-align: center;
    font-size: 14px;
}

在這個示例中，我們創(chuàng)建了一個包含兩個按鈕的容器，每個按鈕都有單獨的類，以便我們可以分別設(shè)置它們的樣式，通過調(diào)整width、height和font-size屬性，我們可以改變按鈕的大小和外觀，我們還設(shè)置了按鈕的背景色、顏色、邊框樣式等屬性，以增強(qiáng)按鈕的樣式和可用性。