테두리가있는 단추 그룹

이 border속성을 사용하여 경계가있는 단추 그룹을 만듭니다.

예

.button {

    float: left;

    border: 1px solid green;

}

[전체소스]

<!DOCTYPE html>

<html>

<head>

<style>

.btn-group .button {

    background-color: #4CAF50; /* Green */

    border: 1px solid green;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    cursor: pointer;

    float: left;

}

.btn-group .button:not(:last-child) {

    border-right: none; /* Prevent double borders */

}

.btn-group .button:hover {

    background-color: #3e8e41;

}

</style>

</head>

<body>

<h2>Bordered Button Group</h2>

<p>Add borders to create a bordered button group:</p>

<div class="btn-group">

  <button class="button">Button</button>

  <button class="button">Button</button>

  <button class="button">Button</button>

  <button class="button">Button</button>

</div>

<p style="clear:both"><br>Remember to clear floats after, or else will this p element also float next to the buttons.</p>

</body>

</html>