I want to add image button inside an input button which has url.action method
<input type="button" class="btn btn-primary" value="View Chart" onclick="location.href='#Url.Action("Multigraph", "Home")'"/>
Actually i want to do this
On click of the image i will be able to go to the specific view
I have also looked into this link
Any help will be appreciated
You could style the input button with css.
.btn--graph {
width: 110px;
height: 93px;
background-image: url('http://i.stack.imgur.com/jCvdY.jpg');
}
<input type="button" class="btn btn-primary btn--graph" onclick="location.href='#Url.Action("Multigraph", "Home")'"/>
However if this button is actually a link to another webpage. It would semantically be more correct to use an anchor link.
<a href="#Url.Action("Multigraph", "Home")">
<img src="http://i.stack.imgur.com/jCvdY.jpg" alt="View Chart">
</a>
Related
I wish to add a font awesome icon beside my input button.
So, I found this answer and only option 1 apply to my use case since I need to submit a form to delete repository.
But the input button does not match the color of span tag.
I tried to add btn-danger class into input tag but it has shadow.
https://jsfiddle.net/coolwei/4osuyrk5/6/
What I want to achieve is a consistent color and button size with View and Add button.
First of all, you should use <button> tag.
However, if you really have to do this that way, you should clear default input styles like this:
.clear-input {
background: none;
color: inherit;
padding: 0;
border: 0;
}
And add this class to your input
<input class="clear-input" type="submit" value="Delete">
https://jsfiddle.net/2vdabphn/
I'm not sure why you're nesting a button inside an a here.
<a href="#">
<button type="button" class="btn btn-success mr-1">
<i class="fas fa-user-plus"></i>
Add Student
</button>
</a>
For your submit button, what you want to do is use the button tag with the type="submit" property.
<button type="submit" class="btn btn-danger">
<i class="far fa-trash-alt"></i>
Delete
</button>
I've been reading on how to implement a button. There are a lot of answers.
None go into why a specific version is preferred over the other. What is the standard good practice way of today?
The button I am specifically looking for is an image (no text), uses href and has to submit.
I've come up with the following but it is not working:
<button class="btn-googleplus" href="/auth/google" type="submit"></button>
<input type="submit" class="btn-googleplus" />
button .btn-googleplus {
background-image: url("img/googleplus.png") no-repeat center center;
}
I've seen variants like this (I dislike as it seems complicated to have an img inside the button tag):
<button href="/auth/google" type="submit">
<img id="img" src="img/googleplus.png" />
</button>
Adding href to a button won't work. You need to put the button in a form wherein you specify your href value (the url) in the action attribute.
<form action="/auth/google">
<button href="/auth/google" type="submit">
<img id="img" src="img/googleplus.png" />
</button>
</form>
I would like to have a "Refresh" button on my page. For that I decided to use the bootstrap refresh-icon style. The icon appears on my button but it does not leave much room for the text "Refresh". Here is the code and Fiddle...
<input class="icon-refresh" type="submit" value="Refresh" name="Test"> </input>
http://jsfiddle.net/jjaleel/kVHbV/339/
Anyone have any suggestions on how I can expand the button width so it shows both the refresh icon and the text?
Thanks.
You could use a button tag instead, they were made to be styled with much more control than an input.
Here's how I would use one with the latest bootstrap..
<button class="btn btn-primary"><span class="glyphicon glyphicon-refresh"></span> Refresh</button>
Use a <button>, with the submit action, instead:
<button type="submit"><i class="icon-refresh"></i> Test</button>
JSFiddle
Put the refresh icon in a span inside a button:
<button type="submit" value="Refresh" name="Test"><span class="icon-refresh"></span> </button>
update (based on OP comment)
Without being able to change the markup at all, this is tough. To get rid of the "Refresh" text, set the text-color to transparent. For sizing, set display to inline-block and fix height and width to 20px.
input{
display:inline-block;
color:transparent;
height:20px !important;
width:20px !important;
}
Ive been trying to style a submit button using an image. I would use CSS but the button is too complex design wise. I have tried adding a background image to a button but the image was badly positioned. I have also tried using
<input type="image" src="myimage.png">
But alas this is not a submit button so It doesn't work. I have looked and tried everything I believe possible but can't find a solution to making the button submit the form. Thanks.
if <input type="image"> doesn't work as expected just try instead
<button type="submit"><img src="myimage.png"></button>
but as I wrote in the comment above your code should work fine too
You have different possibilities for a submit button:
<input type="image">
<input type="submit">
<button></button> <!-- no type needed, since submit is the default type -->
These are all submit buttons. Pick the one, which suits you best.
Now you can choose to put an image between the button or use background-images and position them properly.
Example for button with background-image:
button {
background:url(data:image/gif;base64,R0lGODlhEgASAPYAAAAA/2NFB4tsE7KKCtCiDbWMCpFwDotwGdCgAe65FvjFKvjGLffDJNuqC5V1EaqJGPjHMPbKPvfOTLuRCo5yG+q3F/bEKG1SFdGjBvrcbeGuD2NFCY5wFfG+JPfNRpp1CLSOEfnJNPbOS/rPRsCSBmdJC8+mGvnLOv3ni/3nj/zkgPrUU9uqDWNCA9GoHfjSVfvie/rXW96tEmVHCreQFPnLP/fTXfrbdPzihf3qlP3mhsSYD5VzEPXEOffSWvrbcfzigP3rkqJ8DXFWFd2tFPrQSfnYYvvfdQAAAO7CNGVHDJh3DfLCK/nSUPraZ/zjfv3qkvzlhfvecqiCD2pNEL6TC/fGLvrSTfrbav3pjv3ojPzlgv3TT82kIWpOEZ55C+OyFfnMPvzdb/zda/3XWe/FOqiDEGpKAWZJDXNWEZt2B8KXDt6vHd+yIcifHKN+EXRTAmtQFmlMD2JCBWdIBmdIAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQF+gAAACwAAAAAEgASAAYH/4AAgoN1dHNzcnGDi4Rwb25tbGtqaWiMgmdmZWRjYmNkYWBfXoxnXVxiW1pZWltYV1ZVVIRTXFJRWVC6WU9OTUxLSoJwSWO4SEi6yEdGRURDAHRCV0+5yFBByEA/Pj08SnQ7ZDrWSDlQyDg3NjU0M3MyMTrK5lnIMFgvNS4tLSwrKqCcS4FiC5AnUoxcOWGiRQkSI6ToQKFjy5OLR7DEEBECxBwvH6zEQALjIgwYGUd66MBhA4A0Gkb4QJIhgxQsTkaKOIHhgiAlXyyIaIKsKBIPNSpQmDPIy4QOYUSIkCDCQwQIFR7MYCTHQQMGC6woYJAAwYGtl2ZcMFCAAIEBAg0utLi0aMOGfgHmMgoEACH5BAkFAAAALAYABQAGAAMABgcMgFCCg1BBhodBgoaBACH5BAkKAAAALAYABQAGAAMABgcOgEhIUFCCgkFBhoOFSIEAIfkEAQUAAAAsBgAFAAYAAwAGBwyAUIKDUEGGh0GChoEAOw==) no-repeat 5px center;
padding:5px 5px 5px 27px;
}
<button type='submit'>Submit</button>
(Or as a fiddle)
Use a button element and style it with css. Don't omit the text, you form should be accessible without images or css.
<button type='submit'>Informative submit text</button>
button {
background-image:url('myimage.png');
}
In case someone needs a newer html5 good answer:
<button id='' name='' value='' ><img src='img.jpg' /></button>
<input type="image" src="myimage.png">
or
<input type="submit" style="background:url(myimage.png)">
is there a way to add an image to a regular <input type = "button" /> besides the text?
Yes - you should be able to set the background image on the button in CSS. My preferred method is to use the button tag e.g.
<button type="submit">text</button>
You can put any html you want within the tag and style it.
We can have css for button .
background: url(images/blue.png) ;
You want the "image" input type
<input type="image" src="/path/to/image.png" value="Click here" size="32,32" border="0" />
Button in HTML (For location I'd normally place all images in a images folder)
<BUTTON type="submit" src="/images/Button.png" value="">
Button via CSS, where myBtn is defined in the class file
<BUTTON type="submit" class="myBtn" value="">
Where myBtn is defined in the class file
.myBtn{
background: url(/images/Button.PNG) no-repeat;
cursor: pointer;
width: 140px;
height: 80px;
border: none;
}
<input type="button" style="background-image:url(flower.jpg)" value="Click">
It will set the background image for button using HTML.
An image in the button or an image as the button?
Image AS button:
<input type="image" src="/images/myImage.png" alt="An image as a button"/>
Image inside button....I don't think so.