In this tutorial we will show you the solution of HTML button with image and text and how you are able to create a button with text and image. Most of times, as we see on websites that there are some buttons with text and in others we saw buttons with images.
And today we will show you how we are able to create a button with text and image both. It is a creative way to design a website. Let us understand how we can done this.
Step By Step Guide On HTML Button With Image And Text :-
In our previous articles, we done the topics like how to create a button, how to create a button with text, how to create a button with images.
And in this article we are going to create a button with text and images. If you want to know about topics that we describe then you can visit to our previous article.
For this article, here is the code given below. Let us understand.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
<style>
#htmlbtn{
background-image: url(./images/2.jpg);
width: 100%;
height: auto;
padding: 40px;
background-size: cover;
background-repeat: no-repeat;
font-size: 50px;
}
#otherbtn{
background-image: url(./images/3.jpg);
width: 100%;
height: auto;
padding: 40px;
background-size: cover;
color:white;
font-size: 25px;
background-repeat: no-repeat;
}
</style>
</head>
<body >
<div class="column">
<input type="submit" value="Text" id="htmlbtn">
</div>
<br>
<button type="submit" id="otherbtn">
Click me
</button>
" disabled>Click Me!</button>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- Here, we create two buttons one with the help of input type submit and other with the help of button tag. The concept used for both are same.
- Here, text is applied to button as we done genuinely. But the image is inserted with the help of CSS.
- You can go through the CSS which is also given in above code in which we use background image attribute and inside URL we have to give the location of image.
- And for no repetition background repeat with no repeat is used here and to cover full button background size with value cover is used here. Rest of the properties used are basics. We hope that you understand the codes properly.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last here we can say that after reading this article, we are able to create a button with text and image. I hope this tutorial on HTML button with image and text helps you.
About Ashish
