Make a CSS Button with Rounded Corners

CSS Button

Every button you click on the web, they are all created with HTML and Designed by CSS. CSS allows designing your own customized button as you need. In this tutorial, we will create a customized CSS button with Rounded Corner. You can use this button wheater you want to use either your Website or your own CMS to create a clickable Rounded Button.

Types of Button

There are 3 Different kinds of button you will find in HTML. Clickable button with <a></a> tag that generally contains the link but you can design a button using <a></a> tag.

Another kind of button is the default button tag in the HTML Properties called <button></button>.This property used to create a clickable button when a project with a functional programming language. Means program code defines where will go or redirect when you click on  <button>Click me!</button>

The other kind of button is Input button. When you want to create or embed a form in a webpage you know you must have a form submission button to collect your user information or whatever you want to collect. This kind of button looks like <input type="button" value="Input Button">.

Making Customized Button

Note: We will use Internal CSS to design our Button

<!DOCTYPE html>
<html>
 <head>
  <style>
    .button {
    background-color: #4CCF50;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
  </style>
</head>
</html>

Here <style></style> contain the CSS code and embedded into HTML that’s why this kind of CSS called internal CSS. the <style> tag contain the design of our button. Now we have to create our button in HTML format the to apply the design we have to link HTML with CSS written above.

The code looks like:

<button>Bytton withou desgin</button>
<a href="#" class="button">Link Button</a>
<button class="button">Button</button>
<input type="button" class="button" value="Input Button">

Add this Code after </head> tag and before </html> tag. The Full code will look like

<!DOCTYPE html>
<html>
  <head>
    <style>
    .button {
    background-color: #4CCF50;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
    </style>
  </head>
    <body>
      <button>Bytton withou desgin</button>
      <a href="#" class="button">Link Button</a>
      <button class="button">Button</button>
      <input type="button" class="button" value="Input Button">
    </body>
</html>

Now you can see the button preview. We will round the corner of the button by adding some CSS value.

We will add a CSS attribute border-radius in our CSS file in order to make our button rounded. Add border-radius:50% in the above CSS file and run your file to notice the change our border will be rounded.

Now see the result of the rounded button

Now the buttons are Rounded

Video Instruction

Here is a video on How to make a Rounded Clickable Button with CSS by using Notepad

To stay with us Like us on Facebook and Subscribe to our Newsletter also Subscribe on Youtube

$ Recommended for you

Leave a Reply

Your email address will not be published. Required fields are marked *