Create a simple button in HTML


Updated on January 26z, 2021, at 8:00 PM [IST], created by Admin, Website: codewithbishal.com


Preview :




Simple Button in HTML :

What is a simple button?

=> Our awesome, simple button gives visitors an attractive simple button made with HTML and CSS.

How can I use this simple button using HTML?

=> You can easily copy the code or can download the code from our website and can simply paste it anywhere to get the simple button.

Do I need to know how to code?

=> No, you don't need to know how to code you can simply copy code from here and paste it wherever you want your simple button. Also, you can try it on our website using the "TRY IT NOW" option or can download the code using the "Download" button below.

Is it safe to use the simple button in HTML?

=> Yes, it's completely safe to use the simple button.

What are the advantages of the simple button?

=> This is a very good way for creating a button using HTML.

How can I download the source code of the simple button?

=> Scroll the page to the bottom there you will find our download button to download the code.

Overview of the Blog :

=> In this blog, you can learn, how to make a simple button using HTML and CSS By Code With Bishal. Just Copy The Code From Here And Paste It Into Your Website or portfolio. To Preview scroll the page to the beginning. If you are having any problem viewing the code just refresh the page. The simple button is a lightweight and easy-to-use HTML and CSS code that creates a simple button for you. In this blog, there are fifth sections on the webpage, in the first section, you can get a preview of the blog, in the second section there are few FAQs and an overview of the blog, in the third section there are few more coding blogs you might like, in the fourth section you can Try our simple button using the "TRY IT NOW" button, after that, you can copy the code and paste it [that's the fifth section] and from the last section You can download the source code.


You might like this :

Email Validation using HTML, CSS and JavaScript Create Draggable Lists with Javascript Password Strength meter using JS
Image Gallery with Filtering (HTML, CSS and JavaScript) Social media icons with hover effect(Pure CSS)




Step by step guide of creating a Simple Button in HTML(If you want to make an animated button click Here ) :

Step 1

=> Add the Broiler plate of HTML
              
<!DOCTYPE html>
<html>
<head>
<title>Simple Button - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com -->
<body>
</body>
</html>

Step 2)

=> Add CSS (External or Internal)

If you are using External CSS then create a file

                
                    style.css
                

And add code :

                
<link rel="stylesheet" href="style.css">

If you want to use Internal CSS than add

                <style>   </style>

tag Between

                <head>   </head>

then add the CSS code between style tag or inside
style.css

Then add style to the button


.button {
border-radius: 4px;
background-color: #00FFFF; /* change this to change the colour of button */
border: none;
color: #3333ff; /* change this to change text colour */
text-align: center;
font-size: 38px; /* change this to change the font size */
padding: 20px;
width: 600px; /* change this to change the width of the button */
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
                

In your HTML file

OR copy the code from below


Step 1) Add your HTML Code -

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>Simple Button - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com -->
<body>
<button type="button" class="button">Change this to change text</button> </body>
</html>

Step 2) Add your CSS Code -

CSS Code
              
<style>
.button { border-radius: 4px; background-color: #00FFFF; /* change this to change the colour of button */ border: none; color: #3333ff; /* change this to change text colour */ text-align: center; font-size: 38px; /* change this to change the font size */ padding: 20px; width: 600px; /* change this to change the width of the button */ transition: all 0.5s; cursor: pointer; margin: 5px; } </style>




Leave a Comment:

Search