Example 01: Using the CSS Style Tag to Add an Image in a Button in an HTML File
In this example, we will add an image inside a button using the CSS Style Tag in the file header. Inside the Style Tag, we will construct a class for the button, which will be called later in the body. Then, we will create a script in which we will add an image to a button using the technique we previously mentioned.
In the previous script, we opened a Style Tag in the file header. In this tag, we open the button class parameters in which we will define several designing properties for the button element. First, we add the image for the button’s background. We can add the image via “URL” or “src”. Then we add the background-size property which is stated as a “cover”. Then we define the width and height of the button as well. After this, we close the Style Tag and move to the body tag. In this tag, we add a heading using the h1 tag. Then, the button tag is called. In this tag, we call the styling class that we created earlier to inherit all the styling that are defined in the class. Then, we close all the remaining tags and save the file in the HTML format.
As we can see in the previous output, the image appears as a button on our browser’s page along with the heading. This justifies that the styling class was successfully inherited by the button tag.
Example 02: Adding an Image in a Button Using an Inline CSS Approach
In this instance, we will add an image to a button using the Inline CSS approach. We will add an image to a default button element of the Hypertext Markup Language by giving it an image’s URL in this method. Now, let us take a look at the script for this technique.:
In the script reflected in the image, we can see that the file header is empty because we will use the Inline CSS approach in this example. We open our button tag. In the tag, we mention the CSS that we want the button to have in the style property. We mention all the styling in this property and separate them with semicolons. We also add an image using the background image keyword and assign an image via URL. Then the button tag is closed along with the body tag. After this, we open this HTML file on our browser.
The previous output is an evidence that the Inline Style Tag approach has been a success. We can see that the image is added to the button and the default button is now transformed into an image.
Example 03: Using the CSS Style Tags to Add an Image to a Button When it Hovers Over
We will add an image to a button that will appear only when the button is hovered upon in this example. We will use the Style Tag CSS to provide a button with such behavior in an HTML file. We will create a separate class to segregate this styling for a specific element in this example. To achieve this goal, we should write the following script:
In the previous script, we opened our head tag for the HTML file. In this tag, the styling of the button is defined by opening a class for the button element. In this class, we define the width and the height of the button first. Then, we add a property that turns the cursor into a pointer, and we give the text a reasonable size as well. Then, we add an inherited method called “hover” to the class. In this function, we add an image to the background via URL and assign a property to the background size called the “cover”.
After this, we close all the styling tags and move toward the body of this file. In the body tag, we add a heading using the h1 tag and the button tag is opened after the heading tag. In the button tag, we call the class that we created in the Style Tag of the file’s header. And then, close the button and body tag. After this, we open this file in our browser to get the following output:
The output that we see in this file is the result after the button has been hovered upon. When we hover over the button, the image that we assigned in the Style Tag of the file header appears.
Example 04: CSS Style Tag Transformation of a Default Button to an Icon for the Next and Previous Function
In this example, we will transform the two default buttons of the Hypertext Markup Language by using the CSS Style Tag. We will transform the two buttons in this example into the next and previous icons by adding an image in the Style Tag. We should write the following script to do so:
In the previous script, we add a Style Tag in the file header. Then, we create two classes for the two buttons in the Style Tag. In these classes, we add an image to both the buttons respectively, using the background image property and the URL format for the image. After assigning both classes with their properties, we close the style and head tag and open the body tag to create the content for our browser’s page. First, we give the border a heading with the help of the h1 tag, which is a heading size defined in HTML. Then, we create two buttons. In both these buttons, we assign the relative class defined in the Style Tag. After this, we close the tabs and open this file on our browser after saving it.
The previous output is the outcome of our script. As we can see, both the buttons are aligned and the images from the style classes are inserted correctly. Now, the default buttons are transformed into the next and previous icons for a web page by using CSS.
Conclusion
In this article, we discussed several examples of adding the images to a button using CSS. We used the Inline CSS and Style Tag CSS to add the images to a default button in an HTML file. We implemented several effects on a button to add an image like the hover effect or cover style background by using the Notepad++ to edit the HTML file. We used the different properties in the CSS styling of the button element to transform them into an attractive attribute in our webpage.
