Hola normalmente hago mas PHP que otra cosa pero en este caso me ha tocado retocar un entorno gráfico y tengo una duda.
Esta es la web para poder visualizarla.
http://desarrollo-app.webcindario.com/css2/page.html
Lo que quiero y no he conseguido tras mucho tiempo con dreamweaver es que los botones de arriba a la izquierda (BOTON 1, BOTON DOS Y BOTON NUMBER TRES) mantengan la misma anchura independientemente del texto que se les ponga.
Gracias de antemano.
Un saludo.
Este es el CSS
Código HTML:
.Button .btn
{
position: relative;
overflow: hidden;
display: block;
width: auto;
z-index: 0;
height: 20px;
color: #ECEEEF;
white-space: nowrap;
float: left;
}
.Button .t
{
height:20px;
white-space: normal;
padding: 0 50px;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
text-align: left;
line-height: 20px;
text-decoration: none !important;
}
input, select
{
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
}
.Button .active
{
color: #E9EFF2;
}
.Button .hover, a.Button:hover
{
color: #F1F6F8;
text-decoration: none !important;
}
.Button .active .r
{
top: -40px;
}
.Button .hover .r
{
top: -20px;
}
.Button .r
{
display: block;
position: absolute;
overflow: hidden;
z-index: -1;
top: 0;
right: 0;
width: 2px;
height: 60px;
}
.Button .r span
{
display: block;
position: absolute;
overflow: hidden;
z-index: -1;
top: 0;
right: 0;
width:405px;
height: 60px;
}
.Button .active .l
{
top: -40px;
}
.Button .hover .l
{
top: -20px;
}
.Button .l
{
display: block;
position: absolute;
overflow: hidden;
z-index: -1;
top: 0;
left: 0;
right: 2px;
height: 60px;
}
.Button .l, .Button .r span
{
background-image: url('images/Button.png');
}
/* end Button */
Y este es el HTML
Código HTML:
<div><form method="get" id="newsletterform" action="javascript:void(0)">
<input type="text" value="" name="email" id="s" style="width: 95%;" />
<button class="Button" type="submit" name="search">
<span class="btn">
<span class="t">Boton 1</span>
<span class="r"><span></span></span>
<span class="l"></span>
</span>
</button>
<button class="Button" type="submit" name="search">
<span class="btn">
<span class="t">Boton dos</span>
<span class="r"><span></span></span>
<span class="l"></span>
</span>
</button>
<button class="Button" type="submit" name="search">
<span class="btn">
<span class="t">Y boton number 3</span>
<span class="r"><span></span></span>
<span class="l"></span>
</span>
</button>
</form></div>
</div>