Home/ Questions/Q 9216359
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T02:24:04+00:00

I’m trying to make a button looks like I want. I managed to do

  • 0

I’m trying to make a button looks like I want. I managed to do this, but the problem is that requested me to use javascript for posting form, this is breaking completely accessibility for this website.

So, I would like to know how can I obtain the same effect by using <input type"submit" /> while keeping the mouse hover effect on all the button, not text only (my first solution had this problem).

Here is how should look the button (you can also see mouse over effect):

Button styled with mouseover effect

Here you can find a fiddle: http://jsfiddle.net/FireDragonDoL/hjC7P/

And here is code:

HTML

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <div class="nothing">
      <div class="button"><span><span>Leggi tutto</span></span></div><br /><br />
    </div>
    <div class="container">
      <div class="button"><span><span>Leggi tutto</span></span></div><br /><br />
    </div>
  </body>
</html>

CSS

* {
    outline:none;
    border:0;
}
body {
    margin:0;
    font-family:Georgia, "Times New Roman", Times, serif;
}
a {
    color:#750e0e;
    text-decoration:none;
}
a.reverse-color {
    color: #D6D6B0;
    text-decoration: none;
}
.container .button {
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_hover.png") no-repeat scroll 1px 0 transparent;
}
.container .button span {
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_hover.png") no-repeat scroll 100% 0 transparent;
}
.button {
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_rosso.png") no-repeat scroll 1px 0 transparent;
    border: 0 none;
    cursor: pointer;
    height: 60px;
    margin: 0;
    overflow: visible;
    padding: 0 0 0 15px;
    width: auto;
    float:right
}
.button span {
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_rosso.png") no-repeat scroll 100% 0 transparent;
    color: #750E0E;
    float: left;
    font-size: 14px;
    font-weight: bold;
    height: 60px;
    text-align: center;
    text-shadow: 0 1px #D7E9A4 !important;
    white-space: nowrap;
    text-shadow:1px 1px #FFFFFF;
}
.button:hover span {
    color:#333;
}
.button span span {
    line-height: 52px;
    padding: 0 20px 0 0;
}
.button:hover {
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_hover.png") no-repeat scroll 1px 0 transparent;
}
.button:hover span {
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_hover.png") no-repeat scroll 100% 0 transparent;
}
.container, .nothing {
  clear: both;
    overflow:hidden;
    padding:10px 0;
}

The only idea I have is actually using a big image of the button background, (a wider, possibly), and use <input type="image" />, but in that case I don’t know how to place text over the image.

Any suggestion appreciated

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    At the moment, there isn’t a way to do this through a single html element. Maybe with :before and :after something can be done, or with position: relative too.

    At the moment, I’ll stick with javascript code to transform those items into “submit” buttons.

    • 0