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;
}
Related
I am using the following code for making a button that looks like the glyphicon:
<button type="submit" class="btn btn-link">
<span class="glyphicon glyphicon-triangle-top" style="font-size: 20px;">
</span>
</button>
When I click on the button, a box appears around the glyphicon (following image) which is not desirable to me. How can I make this box invisible or even make it smaller?
For example in stackoverflow, such a box does not exist when you click on vote-up (which you can do right away on this post ;) )
Please help. Thanks in advance.
Set box-shadow and outline to none when focused.
.btn-link.btn:focus {
box-shadow: none;
outline: none;
}
I'm using button with position:fixed. If I hover mouse, it changes as a hand symbol when after scrolled it does not hover.
Before scrolling hover works at center of the button not at edges.
<form action="response.php">
<button style=" position:fixed;" >Get Your Result </button>
</form>
default position i bring mouse into center of button it works
same default position hover is not working even mouse cursor on button
finally i scrolled after hover entirely gets disabled
Try adding z-index property to your button.
This might be happening because on scroll, your button might be having any other element overlapping it.
FYI: In z-index, elements with higher z-index value comes in front.
I think need to set button type
Like this
<button type="submit" style=" position:fixed;" >Get Your Result </button>
I think here works what you want:
<form action="response.php" style="min-height:800px;">
<button style=" position:fixed; cursor:pointer;" >Get Your Result </button>
</form>
Check Fiddle
Use this
<form action="response.php">
<button type="submit" style=" position:fixed;cursor:pointer;" >Get Your Result </button>
</form>
Are you looking something like this:
<body>
<form action="response.php">
<button type="button" style=" position:fixed;" >Get Your Result </button>
</form>
</body>
styles
button:hover{
background-color: red;
cursor: pointer;
}
body{
height: 2000px;
}
i'm currently working with Twitter Bootstrap and have a problem concerning the size of elements. I'd like to create an input field with an appended button. That's why I'm using a div with "input-append", which sorrounds the input and the button tag.
Now my problem: I want everything to be a bit bigger. So i gave the button tag the property "btn-large". Unfortunately there doesn't seem to be a similar property for the input field.
How can I fit the input field to the appended button?
<div class="input-append">
<input class="span3" id="appendedInputButton" size="16" type="text"><button class="btn btn-large" type="button"><i class="icon-search"></i></button>
</div>
Heres an impression of my problem:
Regards,
Christoph
Define box-sizing to your input field. Write like this:
input, button{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
You can use following style and if you want bigger then increase padding.
input, button{
padding: 7px;
}
I am trying to make a button for a message system to show an orange dot if there's a new message. However, i can't quite get it working. Is it possible?
Here's the button
<input type="button" value="Messages •" />
And the button on jsFiddle if anyone feels like trying out :-)
http://jsfiddle.net/ePA47/1/
Use a button element instead.
<button type="button">
Messages <span style="color: orange;">•</span>
</button>
Of course, don't add your stylings inline. I just did for this example's sake.
You could also add a class to the button such as new-messages and then do...
button.new-messages:after {
content: "•";
color: orange;
}
Just keep in mind the latter won't work in older IEs.
Use <button> instead of <input> since it has child elements which you can style.
To add an orange dot to your button, I would recommend using a background-image. This will give you the ability to design the dot however you wish, and not be constrained by font types.
It's also better for accessibility if the orange dot is added as a background image, as this is not content.
<input type="button" value="Messages" class="newmessage" />
.newmessage
{
background-image:url('http://img859.imageshack.us/img859/9611/orangedot.jpg');
background-repeat:no-repeat;
background-position:right center;
padding:5px;
padding-right:25px;
}
See Demo: http://jsfiddle.net/ePA47/3/
As per the question heading, the following will help to add multiple styles in a single style tag
<button type="button" style= "margin-top : 20px; border-radius: 15px"
class="btn btn-primary">View Full Profile
</button>
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)">