CODEWITHSUNDEEP
htmlcss
blay
blay

Reputation: 225

Adding images to css3 buttons and submit

i search the web and i found a css3 button generator which generated i button i desired. But when i got the code and used it in my i found out that the button is not able to submit. when i change the button code given to me from the css button generator site to a real button, its able to submit but fails to load the image to the left side of the button. I've labelled the button html generated from the site as html 1 and my own html button as html 2.

HTML 1

<a inpuu class="button" href="#">Click to send</a>

HTML 2

<input name="submit" type="button" value="Click to send"  class="button"/>

CSS

.button {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 6px 24px;
    border: 1px solid #487dbe;
    border-radius: 4px;
    background: #75cbff;
    background: -webkit-gradient(linear, left top, left bottom, from(#75cbff), to(#487dbe));
    background: -moz-linear-gradient(top, #75cbff, #487dbe);
    background: linear-gradient(to bottom, #75cbff, #487dbe);
    text-shadow: #2d4e77 1px 1px 1px;
    font: normal normal normal 13px arial;
    color: #ffffff;
    text-decoration: none;
}
.button:hover,
.button:focus {
    border: 1px solid #5a9ced;
    background: #8cf4ff;
    background: -webkit-gradient(linear, left top, left bottom, from(#8cf4ff), to(#5696e4));
    background: -moz-linear-gradient(top, #8cf4ff, #5696e4);
    background: linear-gradient(to bottom, #8cf4ff, #5696e4);
    color: #ffffff;
    text-decoration: none;
}
.button:active {
    background: #487dbe;
    background: -webkit-gradient(linear, left top, left bottom, from(#487dbe), to(#487dbe));
    background: -moz-linear-gradient(top, #487dbe, #487dbe);
    background: linear-gradient(to bottom, #487dbe, #487dbe);
}
.button:before{
    content:  "\0000a0";
    display: inline-block;
    height: 24px;
    width: 24px;
    line-height: 24px;
    margin: 0 4px -6px -4px;
    position: relative;
    top: 0px;
    left: -12px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABbElEQVRIie3VMUtbURQH8J9RHEIQkRIcRKuDs5NfwKV1sYOunTKV4iDiV3BwED+AOEhwcnCStkudHBxK6eAiKF0KJUOLZAhpiMO9wWdS43tJJvEPj3fveef+zzn/e899vOAJDPexdg5raOLXYNK5xziOI/kFph5zzPUYYBSTcfwK+R55umIBe3jTzWkkBdFrHAlZJ/EHB/iaPbd7FLCPOhqoCrq3nipK/QTYjMRbQrXv2wI08TfxPRMWcY2TWMk0viWIG9jAGW5RxqouJ6od7wSNp+O8FElbAS6ifQo7qAlSrmetpIXTBHlNSu3T9kEOxcT8n3CKBhZgtM03j5WUa1OhgB+CPGVhUxuY75WwvbIiLgXti/gSg+3qbMAHGPqPbQwfMZOwTQhXQgWzWBYuu99YwlWW7CdjhnWdTfUp+uRxGG3bWSvIxSBFnVJV8DOOF3COG7yN74HjUKj0w2MO/fzR4LtQ1WdhP54h7gCh/1HB9CpO6gAAAABJRU5ErkJggg==") no-repeat left center transparent;
    background-size: 100% 100%;
}

How do i make the image appear on HTML2 left side while it acts as a submit button.

Upvotes: 0

Views: 34

Answers (3)

nikoloza
nikoloza

Reputation: 966

Try <button> tag. <a> is for do some link and without javascript you can't submit with this. <input type="submit"> is older use for submitting. That's the way to do it by HTML5 standard. Also, it must be into <form> tag to do submit:

<button type="submit" class="button">Click to Send</button>

Fiddle: http://jsfiddle.net/nikoloza/nck2o2y7/2/

Upvotes: 0

Ian Hazzard
Ian Hazzard

Reputation: 7771

It doesn't need to be that hard. Use the HTML5 <button> tag. In it, you can put HTML elements and cool stuff. Use it like this:

button
{
  display:inline;
  cursor:pointer;
  }

#kittenButton {

  width:100px;
  display:inline;
  vertical-align:middle;
  
}
<button>
  <img id="kittenButton" src="http://placekitten.com/1000/1000" />&nbsp;Click me to see kitten pictures!
</button>

Also, you can still use it to submit. Just add type="submit" or onclick="document.forms['form_name'].submit()" to your button.

Hope this helps!

Upvotes: 1

sergio0983
sergio0983

Reputation: 1288

the button style doesn´t work on your button because you use an input tag, that cannot have :before or :after, that is what the button generator uses for images (generally, any tag that doesn´t have an opening tag and a closing tag cannot benefit from after and before pseudo selectors, and, no, doesn´t work if you create a closing tag for inputs or images).

simply put "onclick = this.parent.submit()"; on the a tag, assuming your form is the first parent of the button

Upvotes: 0

Related Questions