<button type="button" onclick="msg();">버튼 클릭</button>

<!-- 주로 자바스크립트와 함께 사용합니다. -->
<script>
    const msg = () => {
        alert("환영합니다.");
    }
</script>
브라우저에서 실제 표시된 모습
<button type="button" disabled>비활성화된 버튼</button>
브라우저에서 실제 표시된 모습
<style>
    button {
        color: inherit;
        text-decoration: none;
        padding: 0.5em 1em;
        background-color: #fff;
        border: 1px solid #777;
        border-radius: 0.5em;
        display: inline-flex;
        align-items: center;
    }

    /* 닫는 태그가 없는 빈 요소인 input은
       ::before나 ::after를 사용할 수 없습니다. */
    button::after {
        content: "";
        display: inline-flex;
        width: 0.5em;
        height: 0.5em;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
        transform: rotateZ(225deg);
        margin-left: 0.2em;
    }
</style>
<button type="button">다음 슬라이드</button>
브라우저에서 실제 표시된 모습
<form action="/submit" method="post">
    <label for="name">이름:</label>
    <input type="text" id="name" name="name">
    
    <!-- type이 명시되지 않아 기본값인 submit이 적용됨 -->
    <button>클릭하세요</button>
</form>
<form action="/submit" method="post">
    <label for="name">이름:</label>
    <input type="text" id="name" name="name">
    
    <!-- 의도적으로 폼 제출을 막고 JavaScript 동작만 수행 -->
    <button type="button" onclick="alert('버튼이 클릭되었습니다!')">클릭하세요</button>
</form>