como hacer transparente una parte de un botón con css

publicado por: Anonymous

Hola a todos He conseguido realizar más o menos lo que quería con mi web. Pero me encuentro con que ahora quiero hacer que la parte de arriba de mi “botón” sea transparente para así poder visualizar la línea negra de la plantilla y el resto del botón sea blanco con el color del texto como el que tengo puesto en la plantilla general. Pero no lo consigo. Adjunto código css para a ver si alguien, me puede ayudar. No hay html, ya que esto es joomla y posiciones de módulos… y solo estoy tocando los estilos de la plantilla, los “botones” esos los he creado con css y solo estoy preguntando sobre css

.drop-down li a, .drop-down li span.separator {
border: 1px;
display : inline;
padding: 12px 4px 12px 6px;
font-size: 1.2em;
text-decoration: none;
text-align: left;
background-image:none;

-webkit-transition : all 0.3s ease-in-out;
-moz-transition : all 0.3s ease-in-out;
-ms-transition : all 0.3s ease-in-out;
-o-transition : all 0.3s ease-in-out;
transition : all 0.90s ease-in-out;
word-wrap: break-word;

    /*estilo forma botón*/
    border: 2px solid transparent; /*anchura, estilo y color borde*/
    padding: 0; /*espacio alrededor texto*/
    background-color: #778899; /*color botón*/
    color: #7A0707; /*color texto*/
    text-decoration: none; /*decoración texto*/
    text-transform: uppercase; /*capitalización texto*/
    font-family: 'Helvetica', sans-serif; /*tipografía texto*/
}

menú

Como veis en la imagen el fondo entero es gris. Quiero que sea blanco pero la parte de arriba, que tenga esa línea negra o sea transparente. A parte quiero que salga todo como en una caja. Intento ponerle un “border” a esa parte del módulo “js-navigation” Pero no me aparece. adjunto código de este bloque

#js_navigation{
    position: fixed;
    margin-top: 180px;
    border-top: 10px;
    border-bottom: 1em;
}

Con todo el código que he estado tocando. Mis preguntas son:

  • Como hacer que la parte de arriba del botón tenga la misma línea negra de atrás o como hacer transparente la parte de arriba del botón.

  • Como puedo unir todos mis botones, es decir que no haya márgenes o si los hay ya se los daré yo como vea conveniente.

  • Como puedo meter esos botones en una especie de “div” para que sea una caja.

  • Como le cambio en color al texto del enlace, ya que no puedo cambiarlo.

solución

Creo que esto puede ayudar:

_x000D_

_x000D_

	button{_x000D_
		background: -o-linear-gradient(rgba(50, 50, 50, .5), rgba(50, 50, 50, .75), rgb(50, 50, 50));_x000D_
		background: -moz-linear-gradient(rgba(50, 50, 50, .5), rgba(50, 50, 50, .75), rgb(50, 50, 50));_x000D_
		background: -webkit-linear-gradient(rgba(50, 50, 50, .5), rgba(50, 50, 50, .75), rgb(50, 50, 50));_x000D_
		background: linear-gradient(rgba(50, 50, 50, .5), rgba(50, 50, 50, .75), rgb(50, 50, 50));_x000D_
		height: 90%;_x000D_
                width: 90%;_x000D_
                margin: 5%;_x000D_
		color: #aaa;_x000D_
	}

_x000D_

  <div style="background: red; width: 100px; text-align: center; height: 100px;">_x000D_
	  <button>Degradado</button>_x000D_
  </div>

_x000D_

_x000D_

_x000D_

Cambia el color del div para ver la diferencia.

Entonces, usando los colores de tus botones (los convertí a rgba pues desconozco cómo hacerle para hex) código quedaría algo así:

_x000D_

_x000D_

button{_x000D_
	background: -o-linear-gradient(rgba(119, 136, 153, .5), rgba(119, 136, 153, .75), rgb(119, 136, 153));_x000D_
	background: -moz-linear-gradient(rgba(119, 136, 153, .5), rgba(119, 136, 153, .75), rgb(119, 136, 153));_x000D_
	background: -webkit-linear-gradient(rgba(119, 136, 153, .5), rgba(119, 136, 153, .75), rgb(119, 136, 153));_x000D_
	background: linear-gradient(rgba(119, 136, 153, .5), rgba(119, 136, 153, .75), rgb(119, 136, 153));_x000D_
	color: #7A0707;_x000D_
}

_x000D_

<button>Degradado</button>

_x000D_

_x000D_

_x000D_

Respondiendo a las preguntas:

  1. Dándole un degradado donde la parte de arriba sea transparente (en este caso le puse al 50%)
  2. Puedes hacerlo con float: left;, pero es más recomendable con la propiedad flex. También con un display: inline-block; o margin: 0; TODO depende de la estructura de tu página.
  3. Para ponerlos en un div sólo los anidas en uno. Hasta donde yo sé con CSS no es posible hacer eso.
  4. Con la propiedad color, si lo que quieres es quitarle lo subrayado, es con text-decoration: none;

Esto lo comentaría pero no tengo suficiente reputación: Haz las preguntas más claras y en algunos casos (aquí), es sumamente esencial revisar todo el código para dar una buena respuesta, sino no las podemos responder bien, por ejemplo en la 3er respuesta te dí varias respuestas porque no conozco la estructura.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *