How to Center a Button Text In CSS

To center the text within a button using CSS we need to add a class to the button and then style it. As in the below example we have added a class to the button called "centered-button" and then styled it. It is important to add elements text-align: center; to the parent element to center the text.

Example:

<button class="centered-button">Centered Text</button>
    
Code: 
        <style>
            .centered-button {
                background-color: gray;
                color: white;
                border: none;
                padding: 10px 20px;
                cursor: pointer;
                text-align: center; /* Center the text */
                display: inline-block; /* Allow padding to take effect */
                width: auto; /* Make the button width auto */
                transition: background-color 0.3s ease;
            }
    
            .centered-button:hover {
                background: linear-gradient(to right, #ff7e5f, #feb47b);
            }
        </style>