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

<!-- 주로 자바스크립트와 함께 사용합니다. -->
<script>
    const msg = () => {
        alert("환영합니다.");
    }
</script>
브라우저에서 실제 표시된 모습
<input type="button" value="레이블에 사용될 문자열">
브라우저에서 실제 표시된 모습
<!-- value 속성을 지정하지 않았습니다. -->
<input type="button">
브라우저에서 실제 표시된 모습
<input type="button" value="비활성화된 버튼" disabled>
브라우저에서 실제 표시된 모습
<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>
브라우저에서 실제 표시된 모습
input type 속성의 button 값에 대한 브라우저 호환성과 disabled 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<input type="button"> 1 12 1 1
disabled 1 12 1 1