CODEWITHSUNDEEP
htmlcssruby-on-railshaml
Blackdragon1400
Blackdragon1400

Reputation: 423

Use picture as submit button

I would like to make my submit button for my login page be a picture instead of the grey button. When I use css to do this I get the button on top of the picture. Is there a way to use 

= submit_tag image_tag('image/location.jpg) 'Login', :id => 'Login'

If I could resize the button to a certain dimension that would work as well since I can place it where I want with css.

Thanks!

Upvotes: 1

Views: 293

Answers (4)

Andrey Mikhaylov - lolmaus
Andrey Mikhaylov - lolmaus

Reputation: 23883

Replacing the <input> button with an <img> tag is not a good idea because it violates the principle of progressive enhancement: you should keep your website as accessible as possible, while enhansing its capabilites when the browser allows it.

In your case, there's a pure CSS solution to turn the classic <input type=submit> button into an image: 

input {

  /* sizing the button */
  width: 10em;
  height: 10em;

  /* disabling the system look */
  appearance: none;
  -webkit-appearance: none;

  /* resetting default browser styler */
  border: 0;
  margin: 0;
  padding: 0;

  /* hiding button label */
  text-indent: -9999px;

  /* applying the image */
  background: url('http://i.imgur.com/1x8TMLt.jpg') no-repeat transparent;
  background-size: 100% 100%; /* stretching */

  /* letting users know it's clickable */
  cursor: pointer;
}

When CSS is unavailable for some reason, the button will appear as a button with a text label. When the CSS is available, the button will appear as an image of given size, yay!

Demo: http://jsbin.com/okasut/1/edit

Of course, you should use some semantic selector.

Upvotes: 1

alexandrin88
alexandrin88

Reputation: 4400

As far as I know there is an <input type="image" src="..."/> that will make an image act as a submit button. I don't know ruby on rails, but a quick search turned up image_submit_tag(source, options = {}). You can look at the docs here.

Upvotes: 2

Taavo
Taavo

Reputation: 2414

submit_tag generates an html input type='submit'. You want an html button, which rails can generate using button_tag.

= button_tag :id => 'Login' do
  image_tag('image/location.jpg')

Upvotes: 0

Santiago Baigorria
Santiago Baigorria

Reputation: 696

Have you tried:

.element {
    appearance: none;
    -webkit-appearance: none;
    background-image: url(path/img-png) no-repeat 0 0;
    background-size: /* (desired size in pixels or %) */ 40px 50px;
    -moz-background-size: /* (desired size in pixels or %) */ 40px 50px;
    border: none;
    outline: none;
    /* any other desired rules */
}

Upvotes: 1

Related Questions