I am looking for the value="submit" to show up in the middle of the button. I am not seeing any text, not sure why?
<button type="button" class="button btn_big_blue" value="Submit"></button>
.button{
display: block;
width: 137px;
height: 44px;
text-align:center;
line-height: 40px;
font-size: 18px;
font-weight: bold;
text-decoration: none;
color:#fff;
border:none;
cursor: pointer;
}
.button.btn_big_blue {
background: url(/img/btn_big_blue.png) no-repeat;
color: #fff;
}
when you use the button tag, you put the text you want to be in the button between the opening and closing tag.
<button>Submit</button>
the value="Submit" is only for <input type="button">
The <button> tag doesn't use the value attribute.
You should either switch to an <input type="submit" value="..." /> or move the caption to the content of the tag.
value is the value transmitted when submitting/sending the form.
you want to put your content between the button tags:
<button class="button …">Submit</button>
ps. the class button seems pretty useless, because you can style the button directly
For some reason on Atom, you need to include / after the Submit as such:
Whereas the same thing in codepen displays the Submit value without the slash as such:
<input type="Submit">
Related
<tr><td align="center"><input type="button" name="login" value="Login" onclick="location.href='#'"></td></tr>
<tr><td align="center"><input type="button" class="button" name="register" value="Register" onclick="location.href='#'"></td></tr>
And CSS for the buttons are as below
button{
width: 100%;
height: 30px;
border-radius: 4px;
}
You have not written proper CSS. In HTML first button have input type there is no class and in the second button you have added class="button".
You have written the css for button tag, not for button class. So here is the CSS for class and input type.
Try this CSS.
.button, input[type="button"]{
width: 100%;
height: 30px;
border-radius: 4px;
}
Because you don't have button, you have input.
using this selector
input[type="button"]{}
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 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();
});
How do I use the search icon included in Font Awesome for input? I have a search feature on my site (based on PHPmotion), that I want to use for the search.
Here's the code:
<div id="search-bar">
<form method="get" action="search.php" autocomplete="off" name="form_search">
<input type="hidden" name="type" value="videos" />
<input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; float:left; border: 1px solid black; background-color:
#ffffff" />
<input type="image" src="http://viddir.com/themes/default/images/search.jpg" height="30" width="30" border="0" style="float:right;"/>
<div id="searchBoxSuggestions"></div>
</form>
</div>
You can use another tag instead of input and apply FontAwesome the normal way.
instead of your input with type image you can use this:
<i class="icon-search icon-2x"></i>
quick CSS:
.icon-search {
color:white;
background-color:black;
}
Here is a quick fiddle:
DEMO
You can style it a little better and add event functionality, to the i object, which you can do by using a <button type="submit"> object instead of i, or with javascript.
The button sollution would be something like this:
<button type="submit" class="icon-search icon-large"></button>
And the CSS:
.icon-search {
height:32px;
width:32px;
border: none;
cursor: pointer;
color:white;
background-color:black;
position:relative;
}
here is my fiddle updated with the button instead of i:
DEMO
Update: Using FontAwesome on any tag
The problem with FontAwsome is that its stylesheet uses :before pseudo-elements to add the icons to an element - and pseudo elements don't work/are not allowed on input elements. This is why using FontAwesome the normal way will not work with input.
But there is a solution - you can use FontAwesome as a regular font like so:
CSS:
input[type="submit"] {
font-family: FontAwesome;
}
HTML:
<input type="submit" class="search" value="" />
The glyphs can be passed as values of the value attribute. The ascii codes for the individual letters/icons can be found in the FontAwesome css file, you just need to change them into a HTML ascii number like \f002 to and it should work.
Link to the FontAwesome ascii code (cheatsheet): fortawesome.github.io/Font-Awesome/cheatsheet
The size of the icons can be easily adjusted via font-size.
See the above example using an input element in a jsfidde:
DEMO
Update: FontAwesome 5
With FontAwesome version 5 the CSS required for this solution has changed - the font family name has changed and the font weight must be specified:
input[type="submit"] {
font-family: "Font Awesome 5 Free"; // for the open access version
font-size: 1.3333333333333333em;
font-weight: 900;
}
See #WillFastie 's comment with link to updated fiddle bellow. Thanks!
Here is a solution that works with simple CSS and standard font awesome syntax, no need for unicode values, etc.
Create an <input> tag followed by a standard <i> tag with the icon you need.
Use relative positioning together with a higher layer order (z-index) and move the icon over and on top of the input field.
(Optional) You can make the icon active, to perhaps submit the data, via standard JS.
See the three code snippets below for the HTML / CSS / JS.
Or the same in JSFiddle here:
Example: http://jsfiddle.net/ethanpil/ws1g27y3/
$('#filtersubmit').click(function() {
alert('Searching for ' + $('#filter').val());
});
#filtersubmit {
position: relative;
z-index: 1;
left: -25px;
top: 1px;
color: #7B7B7B;
cursor: pointer;
width: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="filter" type="text" placeholder="Search" />
<i id="filtersubmit" class="fa fa-search"></i>
For those, who are wondering how to get FontAwesome icons to drupal input, you have to decode_entities first like so:
$form['submit'] = array(
'#type' => 'submit',
'#value' => decode_entities(''), // code for FontAwesome trash icon
// etc.
);
Change your input to a button element and you can use the Font Awesome classes on it. The alignment of the glyph isn't great in the demo, but you get the idea:
http://tinker.io/802b6/1
<div id="search-bar">
<form method="get" action="search.php" autocomplete="off" name="form_search">
<input type="hidden" name="type" value="videos" />
<input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; border: 1px solid black; background-color:
#ffffff" /><!--
--><button class="icon-search">Search</button>
<div id="searchBoxSuggestions"></div>
</form>
</div>
#search-bar .icon-search {
width: 30px;
height: 30px;
background: black;
color: white;
border: none;
overflow: hidden;
vertical-align: middle;
padding: 0;
}
#search-bar .icon-search:before {
display: inline-block;
width: 30px;
height: 30px;
}
The advantage here is that the form is still fully functional without having to add event handlers for elements that aren't buttons but look like one.
Similar to the top answer, I used the unicode character in the value= section of the HTML and called FontAwesome as the font family on that input element. The only thing I'll add that the top answer doesn't cover is that because my value element also had text inside it after the icon, changing the font family to FontAwesome made the regular text look bad. The solution was simply to change the CSS to include fallback fonts:
<input type="text" id="datepicker" placeholder="Change Date" value=" Sat Oct 19" readonly="readonly" class="hasDatepicker">
font-family: FontAwesome, Roboto, sans-serif;
This way, FontAwesome will grab the icon, but all non-icon text will have the desired font applied.
.fa-file-o {
position: absolute;
left: 50px;
top: 15px;
color: #ffffff
}
<div>
<span class="fa fa-file-o"></span>
<input type="button" name="" value="IMPORT FILE"/>
</div>
simple way for new font awesome
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="txtSearch" >
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fas fa-search"></i></button>
</div>
</div>
to work this with unicode or fontawesome, you should add a span with class like below, because input tag not support pseudo classes like :after. this is not a direct solution
in html:
<span class="button1 search"></span>
<input name="username">
in css:
.button1 {
background-color: #B9D5AD;
border-radius: 0.2em 0 0 0.2em;
box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5);
pointer-events: none;
margin:1px 12px;
border-radius: 0.2em;
color: #333333;
cursor: pointer;
position: absolute;
padding: 3px;
text-decoration: none;
}
I am having a ridiculous problem where my input text field and submit buttons are not lining up and I really can't figure out an elegant solution of how to fix it. As you can see in the image below, the input text field (labeled "Enter Keywords" in the upper right") is 2px higher than the "Search" submit button:
Here is the HTML:
<div id="search">
<form action="#" method="POST" id="search_form">
<div id="search_inputs">
<input type="text" placeholder="Enter Keywords" name="keywords" />
<input class="button" type="submit" name="search" value="SEARCH" />
</div>
</form>
</div>
Here is the css code:
#search_form .button {
background: black;
color: white;
padding: 3px 15px;
border: none;
font-size: 7pt;
height: 18px;
}
#search_form input[name="keywords"] {
width: 175px;
}
#search {
margin-top: 7px;
float: right;
}
I'm pretty sure setting the font-size to 7pt is messing it up, but I'm not sure why and I don't know how to deal with this because that's the font size of my other buttons in the area.
Thanks for any help!
adding a float: left; to the #search_form input[name="keywords"] style align's their tops correctly, then adding some margin-right should get you good to go.
Fiddle
The issue stems from the float: right on the search button. The input box has a natural display: inline-block to it, which causes the slight drop. Normally when you float right the fix to this is to move that element upwards in the DOM. This won't work in this case. By changing the input to a floated element you are also forcing it to be display: inline.
Though I'm not sure why you can't just add a display: inline to the element.