OneBite.Dev - Coding blog in a bite size

make button css

Code snippet for how to make button css with sample and detail explanation

Creating custom buttons can go a long way in improving the aesthetic appeal of your web pages. In this short article, we will be discussing how to create customized buttons using CSS.

Code Snippet - CSS Button

Here’s a simple code snippet you can use to create a customized button with CSS:

.button {
    display: inline-block;
    background-color: #4CAF50; 
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 10px;
}

And the HTML that uses this CSS class would look something like this:

<button class="button">Click Me</button>

Code Explanation for CSS Button

Let’s go through the code snippet line by line.

  • First, we start by creating a class named .button.

  • We then specify display: inline-block; to make the button appear inline with text and enable us to specify its width and height.

  • We set the background-color: #4CAF50; for the green background.

  • Using color: white; makes the text inside the button white.

  • We use padding: 15px 32px; to space out the text inside the button from the button’s edges. The first value sets the top and bottom padding, and the second one, the left and right padding.

  • With text-align: center;, we can place the text in the center of the button horizontally.

  • We remove any text decoration like underlining by coding text-decoration: none;.

  • We set the size of the text with font-size: 16px;.

  • We use margin: 4px 2px; to create space around the button. The first value applies to the top and bottom margins, the second - to the left and right margins.

  • By adding cursor: pointer;, we add extra user-friendliness - the mouse pointer will turn into a hand icon when you hover over the button.

  • Finally, border-radius: 10px; is used to make the corners of the button round.

That’s it. You’ve successfully created a custom button using CSS. Play around with these properties to create your own unique buttons that best fit your website’s overall design.

css