I'm attempting to use CSS in order to make a sumbit button containing an image. Here's the code:
HTML
<input type="submit" id="search" name="submit" alt="search" >
CSS
input#search{
background:url(../search-icon.png);
background-repeat: no-repeat;
width:40px;
height:40px;
}
This returns this submit button, but I don't want the word 'submit' or the gray square box to appear.
If anyone could suggest what the problem might be, it would be greatly appreciated.
The gray box is caused by a default border being added to the submit buttons. Whereas the submit text is the default value for the button.
HTML:
<input type="submit" id="search" name="submit" alt="search" value="">
CSS:
input#search {
background:url(../search-icon.png);
background-repeat: no-repeat;
width:40px;
height:40px;
border: 0;
}
Add value with empty string to the input:
<input type="submit" id="search" name="submit" alt="search" value="">
instead of input type="submit" you can use input type="image"
use this one line code
<input type="image" src="submit.gif" alt="Submit" width="48" height="48">
see DEMO
You can use CSS text-indent to move the text away:
input#search {
background:url(../search-icon.png);
background-repeat: no-repeat;
width:40px;
height:40px;
text-indent:-999px
}
https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent
Set blank Value of the input type submit as shown below :
<input type="submit" id="search" name="submit" alt="search" value="" >
try this
input#search {
background:url(../search-icon.png) no-repeat;
width:40px;
height:40px;
text-indent:50px;
overflow:hidden;
}
<!DOCTYPE html>
<html>
<head>
<style>
input.search{
background-image:url(url.jpg);
text-indent:-9999px;
width: 100px;
height: 30px;
border:2px solid rgb(0,102,153);
}
</style>
</head>
<body>
<input type="submit" class="search" alt="search">
</body>
</html>
I find this to be the most complete solution:
#submitbutton {
background-image: url(http://paulabrown.net/search-button-png-210.png);
background-repeat: no-repeat;
height: 24px; // height of image
width: 24px; // width of image
padding: 0;
border: none; // get rid of grey border
color: transparent; // hide the text (without indenting it to hell)
background-color: transparent;
outline: none;
display: block; // Ensure block element to apply this to inline-elements
}
html: <input type ="submit" value ="" class="search-button"/>
CSS:
.search-button
{
background-image: url("/images/search.png");
background-repeat: no-repeat;
min-width: 52px;
min-height: 20px;
width:52px;
height: 20px;
border:0;
}
Related
I have a form:
<form action="/search" class="search-form" method="get">
<fieldset>
<input id="q" name="q" type="text" value="Enter search text here">
<input type="submit" value="search" class="search-button">
</fieldset>
</form>
With some CSS to style the button:
.search-button
{
background:url("images/search.gif") no-repeat 0 center;
text-indent: -9000px;
border:none;
display:inline-block;
width: 23px;
background-position-y: 4px;
background-position-x: 5px;
}
.search-button:hover
{
background:url("images/search.gif") no-repeat 0 center;
text-indent: -9000px;
border:none;
display:inline-block;
width: 23px;
background-position-y: 4px;
background-position-x: 5px;
opacity:.8;
}
When I hover over the button, the opacity changes as expected.
If I click the button and move the mouse pointer away, the button becomes a grey square as the next page loads.
What's going on here?
Try to add active state's style also this also:
.search-button:active {...}
#Solution Updates:
Adding :default state fix issue.
The following snippet seems to be working, so it is hard to reproduce the problem.
The rules in .search-button are inherited in .search-button:hover, so you do not need to repeat them, see below.
Note: background-position-y and background-position-x are not valid CSS properties.
See reference: http://www.w3.org/TR/css3-background/#the-background-position
.search-button {
background: url("http://placehold.it/50x25") no-repeat 0 center;
text-indent: -9000px;
border: none;
display: inline-block;
width: 23px;
}
.search-button:hover {
opacity: .8;
}
<form action="#" class="search-form" method="get">
<fieldset>
<input id="q" name="q" type="text" value="Enter search text here">
<input type="submit" value="search" class="search-button">
</fieldset>
</form>
I've created two submit buttons:
http://www.workbooks.com/sites/default/files/image/submit-button-2015-dark.jpg
http://www.workbooks.com/sites/default/files/image/submit-button-2015-light.jpg
I want the first to show as my standard submit button (dark) and the second (light) to show on hover.
My code is as follows:
<input name="submit" id="submit" type="image" src="http://www.workbooks.com/sites/default/files/image/submit-button-2015-dark.jpg" width="314" height="40" value="Sign up" /></div>
CSS is:
submit:hover { background-image: url ('http://www.workbooks.com/sites/default/files/image/submit-button-2015-light.jpg');
However the on hover image isn't showing, any idea why?
Your CSS selector is invalid for the submit button, you need to reference either the button in your CSS as:
This will style all submit buttons.
input[type=submit] { }
This will style only the element (this case a submit button) with the ID of 'submit'
#submit { }
So for example:
input[type=submit]:hover { background-image: url ('http://www.workbooks.com/sites/default/files/image/submit-button-2015-light.jpg');
If you want to style all submit buttons with the same background to begin with and same hover effect you should use:
input[type=submit]:hover { background-image: url ('http://www.workbooks.com/sites/default/files/image/submit-button-2015-light.jpg'); }
input[type=submit] { background-image: url: url('http://www.workbooks.com/sites/default/files/image/submit-button-2015-dark.jpg'); }
You need to drop the src attribute of your input, and use background-image instead in similar manner, as you tried to do on hover. Your attempt failed for two reasons - one you missed hash before referencing your element by it's id (or name), and then even if you make this step right you wouldn't see background image anyway because of src attribute of your input.
You can do it in this simple way:
fiddle
<input type="submit" id="submit" width="314" height="40" value="" />
and:
#submit {
border:0;
width:314px;
height:40px;
background-image: url('http://www.workbooks.com/sites/default/files/image/submit-button-2015-dark.jpg');
}
#submit:hover { background-image: url('http://www.workbooks.com/sites/default/files/image/submit-button-2015-light.jpg');}
#submit:focus, #submit:active {
outline:none;
}
EDIT:
You also have a closing div at the end of input tag - it's probably leftover from your whole code, but it makes HTML invalid without opening div.
Why not change it to use CSS instead, that way you can re use the styling and update the text within the button without creating a new image.
HTML:
<button type="submit">Start Trial ►</button>
CSS:
button {
background: #4e6ea1;
height: 40px;
width: 200px;
color: #fff;
border: 1px solid #444;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
button:hover {
background: #84a3d9;
}
<input name="submit" id="submit" type="image" src="http://www.workbooks.com/sites/default/files/image/submit-button-2015-dark.jpg" onMouseOver="this.src='http://www.workbooks.com/sites/default/files/image/submit-button-2015-light.jpg'" onMouseOut="this.src='http://www.workbooks.com/sites/default/files/image/submit-button-2015-dark.jpg'" width="314" height="40" value="Sign up" />
use onMouseOver property
try this.,
<input name="submit" id="submit" type="image" width="314" height="40" value="Sign up" />
input#submit{
background: url('http://www.workbooks.com/sites/default/files/image/submit-button-2015-dark.jpg');
}
input#submit:hover {
background: url('http://www.workbooks.com/sites/default/files/image/submit-button-2015-light.jpg');
}
By specifying the base image as a src you cannot change it with css, you need javascript to do that. In order to achieve with css you need to do something like this.
<input name="submit" id="submit" type="submit" class="submit" value="Sign up" />
.submit {
background:url(http://www.workbooks.com/sites/default/files/image/submit-button-2015-dark.jpg);
text-indent: -9999px;
text-transform: capitalize;
height:40px;
width: 314px;
border:0;
}
.submit:hover{
background:url(http://www.workbooks.com/sites/default/files/image/submit-button-2015-light.jpg);
}
Note: the text transform is for ie7
You have to set the initial image of the button as css-background property aswell insted of defining it as html src attribute.
New HTML (i also added a submit class, dont use IDs for button syling):
<input name="submit" id="submit" class="submit" type="image" width="314" height="40" value="Sign up" /></div>
New CSS (also added the class indicator .):
.submit {
background-image: url ('http://www.workbooks.com/sites/default/files/image/submit-button-2015-dark.jpg');
}
.submit:hover {
background-image: url ('http://www.workbooks.com/sites/default/files/image/submit-button-2015-light.jpg');
}
The problem is that you firstly have to give the button a background-image and then assign a new one when the user hovers it, otherwise it will be hidden behind.
<input name="submit" id="submit" type="image" width="314" height="40" value="Sign up" />
input {
background-image: url('http://www.workbooks.com/sites/default/files/image/submit-button-2015-dark.jpg');
}
input:hover {
background-image: url('http://www.workbooks.com/sites/default/files/image/submit-button-2015-light.jpg');
}
Fiddle: http://jsfiddle.net/rdxfye9e/
I'm trying to get a button that has an image on it. I've seen stuff like the following but they don't give you the button press/release effect that a normal button does.
<input type="image" id="saveform" src="logg.png " alt="Submit Form" />
Is there a way to get the button click/release effect but just slap an image inside the button?
Yes there is, by applying a background-image to the button like so:
HTML
<button>Click Me</button>
CSS
button{
background-image: url("YourImageHere");
color: #FFF; //random values
height: 50px; //random values
width: 100px; //random values
}
FIDDLE
.yourButton{
background:url("logg.png") no-repeat;
border:none;
cursor:pointer;
width:40px;
height:10px;
}
If you want to do it with the input button you can try this code:
<input type="image" id="saveform" src="logg.png " alt="Submit Form" />
and your css will look like this:
#saveform {
outline: none; //To remove the blue outline ( the blue line ) when the focus event occurs
}
#saveform:active {
transform: scale(0.9,0.9);
}
However if you do not want to try the with the input tag, you can use this code:
Html:
<button id="saveform" type="submit" value="Submit">Submit</button>
CSS:
#saveform{
background-image: url("SourceOfYourImage");
height: 50px; // Any value
width: 100px; // Any value
}
I am trying to do two things:
Replace a regular submit button in my CodeIgniter view (see code below) with a sprite button with roll over effects.
Submit my CodeIgniter form
<input type="submit" name="submit" value="Search" class="button" />
My sprite images (normal and hover states) both do not display using the code above. However, if I comment it out, and replace it with the following, it displays correctly, however I cannot submit my form:
<p class="button"></p>
Here is my css:
.button {
display:block;
width:135px;
height: 35px;
text-indent:-9999px;
}
.button a {
display:block;
width: 100%;
height: 100%;
background:transparent url(../images/button-sprite.gif) no-repeat top left;
outline:none;
}
.button a:hover {
background-position: 0 -35px;
}
What am I doing wrong?
SOLUTION:
Thank you #AdityaSaxena for your alternative solution. I found another solution too:
my.css
.button {
display:block;
width:135px;
height: 35px;
text-indent:-9999px;
background:transparent url(../images/button-sprite.gif) no-repeat top left;
}
.button:hover {
background-position: 0 -35px;
}
my.html
// ...
<input type="submit" name="submit" value="Search" class="button" />
// ...
You are not able to submit the form because you replaced your <input type="submit" /> with an anchor tag. You have to add the capability to submit a form to your <a> tag
.button a was not working because you did not have any <a> tag inside your <input type="submit"> tag which is what was expected when you used .button a
Few changes from the html and js and things will start working for you.
Your new HTML stays intact.
<p class="button"></p>
Your JS / Jquery if you can use it becomes this:
$('.button a').on('click', function(){
$(this).closest('form').submit();
});
I have a button which is all css. I want to have an icon to the left of the text. How do i do that?
Thanks.
<input type="submit"/>
button {
background: orange url(images/icon.png) no-repeat 5px center;
text-align: left;
padding-left: 20px;
}
<button type="submit">Submit</button>
and another way :
button {
postion: relative;
text-align: right;
padding-right: 20px;
}
button img {
position: absolute;
top: 5px;
left: 5px;
}
<button type="submit"><img src="icon.png" /> Submit</button>
If you're using submit input buttons, then give the button some left padding and add the image as a non-repeating background image to the button with CSS.
<input type="submit" class="imageBut submitBut" value="My submit button text" />
CSS:
.imageBut {
padding-left: 30px;
background-position: 0 0; /* Adjust as appropriate */
background-repeat: none;
}
.imageBut.submitBut {
background-image: url(path/to/image.png);
}
Would something along the lines of
input {
padding-left: 24px;
background: url(an-icon.png) 4px 50% no-repeat;
}
work?
Hmmmmmmm. How about something like:
<img src="the-icon"><input type="submit"/>
You can also use jQuery, like this:
$("#button-submit").button({icons: {primary:'ui-icon-play'}});
With the HTML like so:
<input type="submit" name="submit" id="button-submit" /><label for="button-submit">Start</label>