I want to use an image as a button, and that I can do, however I wish to add text on top of the button and don't know how This is how I want it to look. 1 The image will be the whole and the text would be in the red part
How can I do that?
This is what I have so far:
<form action=".html" method="LINK">
<input type="image" src="cola.png" class="c11"/>
</form>
Image inputs are server side image maps. They are designed to let you click on an image and have the server identify where on the image you clicked.
If you want a regular button, with text, and a background image. Then use that:
<button>Your Text</button>
button {
background-image: url(cola.png);
}
You may with to adjust the height, width, background colour and border of the image too.
Instead of using an input as a button, use a button as a button, with the background set to the image you want, and because you're using a button, you can put text inside it easily.
<button type="submit">Text Goes Here</button>
button {
background-image: url('cola.png');
}
Then you can change the styling on the button to achieve the effect you want.
There is many ways to do this:
HTML
<div class="button" onclick="myFunction()">Click me</div>
CSS
.button {
background: url('img.png') no-repeat;
background-size: cover;
background-position: center;
}
JavaScript
function myFunction() {
alert('I was clicked');
}
HTML
<div class="imgDiv">
<img onclick="myFunction()" src="img.png" />
<div>Click me</div>
</div>
CSS
.imgDiv {
position: relative;
}
.imgDiv img, .imgDiv div {
position: absolute;
left: 0px; top: 0px;
}
JavaScript
function myFunction() {
alert('I was clicked');
}
You can try something like this
<!DOCTYPE html>
<html>
<head>
<style>
button {
background-image: url("/images/driveicon.png");
background-repeat: no-repeat;
color: red;
}
</style>
</head>
<body>
<button type="submit">Click Me!</button>
</body>
</html>
