Cambiar estilo del Boton Submit

TikiImages · #1 (**permalink**) 27/10/2012, 01:34

Devido a la equivocacion de foro lo cree aquí.

Hola,

Estoy como loco que no encuentro la solucion para cambiar el estilo de este boton submit.

El boton se deve a un host de imagen ya que mi web es un host de imagen y quiero hacer esto.

Este boton:

Quiero que se vea como este:

Bueno esta mas que claro, esto son los codigos de los botones:

Codigo Boton Azul:

Código:

<a class="button grande azul" href="#"><span>Botón</span></a>

Codigo boton a Modificar:

Código:

<input type="submit" name="botEnviarImagen" value="Subir Imagen" />

Bueno espero que me ayuden

Salu2!

emprear · #2 (**permalink**) 27/10/2012, 06:44

Y el css?

antonio_c30 · #3 (**permalink**) 27/10/2012, 09:12

En el CSS crea una clase que se llame buttons, por ejemplo:

.buttons { background: #0000FF; padding: 10px; color: #FFFFFF;}

luego en HTML, le agregas la clase buttons al input

<input type="submit" name="botEnviarImagen" value="Subir Imagen" class:"buttons" />

TikiImages · #4 (**permalink**) 27/10/2012, 09:29

No me sirvio el codigo anterior intente pero no salia igual.

Me pidieron el CSS, aquí esta el css:

Código:

.button, .button span {
   display: inline-block;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
}
.button {
   white-space: nowrap;
   line-height:1em;
   position:relative;
   outline: none;
   overflow: visible;
   cursor: pointer;
   border: 1px solid #999;
border: rgba(0, 0, 0, .2) 1px solid;
   border-bottom:rgba(0, 0, 0, .4) 1px solid;
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
   -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
   box-shadow: 0 1px 2px rgba(0,0,0,.2);
   background: -moz-linear-gradient(
      center top,
      rgba(255, 255, 255, .1) 0%,
      rgba(0, 0, 0, .1) 100%
   );
   background: -webkit-gradient(
      linear,
      center bottom,
      center top,
      from(rgba(0, 0, 0, .1)),
      to(rgba(255, 255, 255, .1))
   );
   -moz-user-select: none;
   -webkit-user-select:none;
   -khtml-user-select: none;
   user-select: none;
   margin-bottom:10px;
}
.button.full, .button.full span {
   display: block;
}
.button:hover, .button.hover {
   background: -moz-linear-gradient(
      center top,
      rgba(255, 255, 255, .2) 0%,
      rgba(255, 255, 255, .1) 100%
   );
   background: -webkit-gradient(
      linear,
      center bottom,
      center top,
      from(rgba(255, 255, 255, .1)),
      to(rgba(255, 255, 255, .2))
   );
}
.button:active, .button.active {
   top:1px;
}
.button span {
   position: relative;
   color:#fff;
   text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);
   border-top: rgba(255, 255, 255, .2) 1px solid;
   padding:0.6em 1.3em;
   line-height:1em;
   text-align:center;
   white-space: nowrap;
}

.button.pequeno span {
   font-size:12px;
}
.button.mediano span {
   font-size:16px;
}
.button.grande span {
   font-size:16px;
}

.button.rojo {
   background-color: #e62727;
}
.button.naranja {
   background-color: #ff5c00;
}

.button.azul {
   background-color: #00ADEE;
}

A{
   color: #0000cc;
   text-decoration: none;
}

TikiImages · #5 (**permalink**) 27/10/2012, 09:41

Perdon Doble post, tambien queria enseñar donde esta todos los codigos asi tienen una idea mejor, este es el index.phpwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

Código:

<div style="text-align:center"><!DOCTYPE html>
<html>

<head>
   
   <title>Tiki Images - Tu Hosting de Confianza</title>
<link rel="stylesheet" href="boton-css3.css" type="text/css">
   
   
      

</head>
<body>
<a class="button grande azul" href="#"><span>Botón</span></a> <a class="button grande azul" href="#"><span>Botón</span></a> <a class="button grande azul" href="#"><span>Botón</span></a> <a class="button grande azul" href="#"><span>Botón</span></a>
</html>
</body>
</html> 
<br>
<br>
<html>

<head>
   
   <title>Tiki Images - Tu Hosting de Confianza</title>
<link rel="stylesheet" href="boton-css3.css" type="text/css">
   
   
      

</head>
<body>
<form name="subir_imagen" method="post" enctype="multipart/form-data">         
    <input type="file" name="imagen"  /><br />
    <input type="submit" name="botEnviarImagen" value="Subir Imagen" class:"button grande azul" />          
</form>
</html>
</body>
</html>
<?php

        if(isset($_POST["botEnviarImagen"])){
            $nameimagen = $_FILES['imagen']['name'];
            $tmpimagen = $_FILES['imagen']['tmp_name'];
            $extimagen = pathinfo($nameimagen);
            $ext = array("bmp","gif","jpg","png");
            $urlnueva = "imagenes/".md5($name . time()).'.'.$extimagen['extension'];
           
           
                if(is_uploaded_file($tmpimagen)){
               
                    if(array_search($extimagen['extension'],$ext)){
                   
                        copy($tmpimagen, $urlnueva);
                        echo '<img src="'.$urlnueva.'" /><br>';
                        echo "Tu imagen (URL): <a href='$urlnueva'>$urlnueva</a>";
                    }
                   
                    else {
                   
                        echo "Solo se permiten imágenes con formato bmp, jpg, gif o png<br>";
                       
                    }
                   
                }
               
                else {
               
                    echo "Selecciona una imagen.";
                   
                }
       
        }
?></div>

<?php
$archivo = "cuenta.txt";
$abrir = fopen($archivo,"r");
$cuenta = trim(fread($abrir,filesize($archivo)));

if ($cuenta != "") $cuenta++;
else $cuenta = 1;
@fclose($abrir);
$abrir = fopen($archivo,"w");
@fputs($abrir,$cuenta);

@fclose($abrir);
echo 'Numero de Visitas: '.$cuenta;
?>


<body background="http://img.webme.com/pic/i/imx-design/bg.jpg">