Guys I am using a button with icon on 2 side of the text and it works when the text is smaller, but at times I have longer text and had to break them into 2 lines. how to do it ?
<button type="submit" class="button-orange width-280" > <img src="img/icon-getDetails.png"> Get More Details <img class="button-icon" src="img/icon-external-link.png"> </button>
<button type="submit" class="button-orange width-280" > <img src="img/icon-basket.png"> Add to compare basket <span class="badge white">3</span> <img class="button-icon-chevron" src="img/icon-chevron-right.png"> </button>
I am attaching the image with this. I need the longer text also to be appearing like the 1st button.
I don't have your CSS, but I'm guessing that the class width-280 adds a width: 280px to the button.
Instead of using a fixed width, use a minimum width. Change width: 280px to min-width: 280px.
You could set the icon as a background image on the button, and pad the button's sides to the width of the icons. Please note this method is not IE8 friendly. :(
For example
HTML:
<button>
Get more details
</button>
CSS:
button {
background:
url('img/icon-getDetails.png') top left no-repeat,
url('img/icon-external-link.png') top right no-repeat;
padding: 0 30px;
}
Here's a fiddle that might help you imagine it.
Related
I've been trying to change the size of the image on my button.
Think of it like this: I have a button with an image on it, and it's currently way too big. I've tried scaling it down as such:
<img src = "Button.jpg" height: "50%"; width: "20%"> and this doesn't work, no matter what I put in as the height and width.
Even changing it to 20px and 50px doesn't do anything. I'd prefer not having to create a class because I don't know how to navigate button classes and I'm pretty sure there's a way just to do it like how I'm doing it now.
Also, it's not actually a button, it's part of a list.
<li><a href="https://www.google.com/" target="_blank">
(That's also another issue.)
OK NEW CODE FOR THE BUTTON WITH A CLASS:
<li><button class = "test"></button></li>
</ul>
And for my CSS:
.test{
background-image: "instaButton.jpg";
height: 100px;
width: 100px;
}
You should apply custom height and width to the image, not to the button.
If you resize the button, the button size will change, but the image will go out of its boundaries. If you use this option, you can set overflow:hidden; to the button, but your image will get cropped.
If you resize the image, the image WILL be resized, and the button will resize respectively to the image.
Run the following snippet for examples:
button {
padding: 5px;
background: #d95753;
border: 0;
}
.btn-size {
width: 30px;
height: 30px;
}
.img-size img {
width: 30px;
height: 30px;
}
<h1>
Initial styling:
</h1>
<button>
<img src="http://via.placeholder.com/350x150" />
</button>
<h1>
If you resize the button:
</h1>
<p>
the button size will change, but the image will go out of its boundaries. If you use this option, you can set overflow:hidden; to the button, but your image will get cropped.
</p>
<button class="btn-size">
<img src="http://via.placeholder.com/350x150" />
</button>
<h1>
If you resize the image:
</h1>
<p>
the image WILL be resized, and the button will resize respectively to the image.
</p>
<button class="img-size">
<img src="http://via.placeholder.com/350x150" />
</button>
You need to link to a css file in the header. in the css file you can then say: .class and then you can change the shit. So in the html file, you first should add a class to the button so that the css knows where you're talking about.
Your code should look something like this:
<img src="Button.jpg" height="50%" width="20%">
I think you have a wrong html syntax :)
I have a button which I'm using multiple times in my webpage. The buttons styles will be as
Button with Text and Image.
Button with only Image.
Button with only Text.
As shown in the fiddle
http://jsfiddle.net/xzBaZ/4/
I'm using he same css for the button class. I need to align the Text Vertically to center if it is the first case. and no extra alignment is required for other cases.
How can I do this??
vertical-align: bottom on the <img> or make the image and the text equal line heights. The latter requires you to know the image height beforehand.
You should Write the text in span
<button onclick="return false" class="super button"><span>Awesome Button ยป
</span> <img src="/Buttons5/add-to-cart-light.png" alt="" width="28" height="20"/>
and also specify the css for span
.button span{
float:left;
margin-top:3px;
}
Trying to create three horizontal buttons with images and labels under them with HTML5.
Tryed the following example: tutorial , but I need different image for each button.
If i give each button id and add to css #id {background-image:url} i see only part of image instead of image stretched to button size.
I copied some of the code from the target site. Note the height and width below
...
width: 78px;
height: 23px;
...
background-image:url(tabsquare.jpg);
...
}
.hbuttons a:hover{
background-image:url(tabsquareover.jpg);
}
It does not stretch the image. It make a box 78px x 23px. It then puts the image in the background. If you want the image to cover 78px x 23px it should be 78px x 23px. Background-images are different from the <img> tag.
You can create three different class name for three button and set the css background image what ever you want.
<button class="hbuttons">and</button>
<button class="buttons">and</button>
<button class="hbutton">and</button>
or
<div>
<a class="hbutton" href="http://www.cssdrive.com">Home </a>
<a class="buttons" href="http://www.cssdrive.com/index.php/main/submit/">Submit </a>
<a class="hbuttons" href="http://www.cssdrive.com/index.php/main/contact/">Contact </a>
</div>
<div style="clear: left;"></div>
Here the demo: fiddle
I'm trying to display a png image on a <button> element in HTML.
The button is the same size as the image, and the image is shown but for some reason not in the center - so it's impossible to see it all.
In other words it seems like the top right corner of the image is located at the center of the button and not at the top right corner of the button.
This is the HTML code:
<button id="close" class="closing" onClick="javascript:close_clip()"><img src="icons/close.png" /></button>
Update:
What actually happens, I think, is a margin problem. I get a two pixel margin, so the background image is going out of the button. The button and the image are the same size, which is only 20px, so it's very noticable... I tried margin:0, padding:0, but it didn't help...
You could use input type image.
<input type="image" src="http://example.com/path/to/image.png" />
It works as a button and can have the event handlers attached to it.
Alternatively, you can use css to style your button with a background image, and set the borders, margins and the like appropriately.
<button style="background: url(myimage.png)" ... />
If the image is a piece of semantic data (like a profile picture, for example), then use an <img> element inside your <button> and use CSS to resize the <img>. If the image is just a way to make a button visually pleasing, use CSS background-image to style the <button> (and don't use an <img>).
Demo: http://jsfiddle.net/ThinkingStiff/V5Xqr/
HTML:
<button id="close-image"><img src="http://thinkingstiff.com/images/matt.jpg"></button>
<button id="close-CSS"></button>
CSS:
button {
display: inline-block;
height: 134px;
padding: 0;
margin: 0;
vertical-align: top;
width: 104px;
}
#close-image img {
display: block;
height: 130px;
width: 100px;
}
#close-CSS {
background-image: url( 'http://thinkingstiff.com/images/matt.jpg' );
background-size: 100px 130px;
height: 134px;
width: 104px;
}
Output:
The simplest way to put an image into a button:
<button onclick="myFunction()"><img src="your image path here.png"></button>
This will automatically resize the button to the size of the image.
try this
<input type="button" style="background-image:url('your_url')"/>
Why don't you use an image with an onclick attribute?
For example:
<script>
function myfunction() {
}
</script>
<img src='Myimg.jpg' onclick='myfunction()'>
Add new folder with name of Images in your project. Put some images into Images folder. Then it will work fine.
<input type="image" src="~/Images/Desert.jpg" alt="Submit" width="48" height="48">
The topic is 'Embed image in a button element', and the question using plain HTML. I do this using the span tag in the same way that glyphicons are used in bootstrap. My image is 16 x 16px and can be any format.
Here's the plain HTML that answers the question:
<button type="button"><span><img src="images/xxx.png" /></span> Click Me</button>
Try like this format and use "width" attribute to manage the image size, it is simple. JavaScript can be implemented in element too.
<button><img src=""></button>
General Answer:
<button style="background: url('icons/close.png'); background-size:cover"></button>
Since currently selected answer has some issues, posting this answer to save people trouble.
Make sure to give your button the width/height necessary to see your image as well as possible adding a "background-position" attribute to make your image show up as intended.
REACT VERSION:
<button style={{backgroundImage: "url('icons/close.png')"}}></button>
To use Image as button create a button download button image and than open it in paint and note down the top left and right bottom coordinates
`<Img src =" button.jpg" usemap=" #button" >.
<map name = " # button " >.
<area shape ="rect" coords = " Top- left , bottom right "
href = " page you want to open by button" > `
You can use multiple< area> tag to create different button from just one image .
Note : There is one issue with this method that if you try to change the height and width of the image the pixels shift and your button won't work
For that change the button image size externally by photoshop or any other photo editor
That's it you have created your button without java script and with few lines of code
Buttons don't directly support images. Moreover the way you're doing is for links ()
Images are added over buttons using the BACKGROUND-IMAGE property in style
you can also specify the repeats and other properties using tag
For example: a basic image added to a button would have this code:
<button style="background-image:url(myImage.png)">
Peace
I would like to know how I can create a custom HTML button which has a background Image and I can show a custom text over that image.
For example, I would like to show a submit button for which I have a background image for that button and the text "Submit" comes on top of that Image.
I tried this -
<input type="button" value="Submit" style="background-image: url(pages/images/ButtonBackground.png);">
However, it does not work properly. I just see the test submit and the button but the image does not show up.
I recommend that you use <button> instead of <input type='submit' /> or <input type='button' />. The reason is that you can embed HTML elements (nest elements) into the <button> element. This way, you can make a much more flexible button, which can be customized even more.
<button>
<span class='image'></span>
<span class='text'>Click Me!</span>
</button>
<input type="button" value="Submit" style="background: url(pages/images/ButtonBackground.png) no-repeat; width:px; height:px;">
you have to specify the width and height of the image so it covers your button and yes check the path of the image
this is exactly what I have in one of my css and usually what I do in this situation:
html
<input type="submit" value="" name="commit" id="message_submit" class="registerbtn"/>
css
.registerbtn{background:url(../images/btn_registro.jpg) no-repeat; width:98px; height:32px; border:none;}
The simplest way is probably to use a button element with a background. Use e.g. padding properties to make the button suitably large. It is a useful precaution to set a background color for the button, for use when the background image is not shown for some reason, using a color that has sufficient contrast with the text (so it should be similar in color usage to the background image). Example:
<button type=submit style="background: #ccc url(test.jpg); padding: 0.5em 1em">Go!</button>
Caveat: In old versions of IE, there are several bugs in the implementation of button elements. The bugs bite most seriously if a form has several submit buttons.
The reason for the failure when using an input type=submit element is that they are commonly implemented by browsers using built-in routines that are rather immune to CSS.
Here's how I created buttons with actual pics on them along with text. In CSS I put:
button {
display: inline-block;
height: 200px;
padding: 2px;
margin: 2px;
vertical-align: top;
width: 400px;
}
#alldogs-close-CSS {
background-image: url( All_dogs.jpg );
/*background-size: 100px 130px;*/
height: 150px;
width: 300px;
}
The button controls my height and width and #alldogs-close-CSS is the pic I wanted to show on the button.
In my Index.html page I just put:
<button id="alldogs-close-CSS">All Dogs</button>
Now the text isn't very pretty at the moment, but I haven't played with it yet. It does work, though.