Cómo Colocar Botones en Diseño Web - Necesito Ayuda

  • Autor Autor edap7227
  • Fecha de inicio Fecha de inicio
E

edap7227

Alfa
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
buenas Amigo queria saber si alguien me ayudaba a como poder colocar estos botones en mi web
 
Yo tambien estoy interesada alguien sabe?
 
Acabo de hacer algo parecido y tiene la siguiente estructura:

HTML:
<div class="cajaHerra">
    <div class="divTab">
        <div>
            <div class="cajImg">
                <img src="public/img/arriendo.png">
            </div>
            <p>Formatos de vinculacion</p>
        </div>
    </div>
</div>


El resto es CSS 😉

HTML:
.cajaHerra {
    width: 220px;
    height: 220px;
    background-color: #fff;
    float: left;
    text-align: center;
    border-radius: 50%;
    margin: 0 3%;
}

.divTab {
    display: table;
    width: 100%;
    height: 100%;
}

.divTab > div {
    display: table-cell;
    vertical-align: middle;
}

.cajImg {
    width: 90px;
    height: 92px;
    margin: 0 auto;
    display: table;
}

.cajaHerra img {
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    margin: 0 auto;
}

.cajaHerra p {
    font-size: 1.3em;
    width: 80%;
    margin: 0 auto;
}

Si puedes ver, el tamaño de la imagen varia, o en lugar de tener una imagen puedes usar un icon de fontawesome...
 
te puede servir esto ?¿

HTML
Insertar CODE, HTML o PHP:
<div class="container">
  <a class="button circle" href="#">welcome</a>
</div>

CSS
Insertar CODE, HTML o PHP:
@circle-size: 100px;
@outside-circle-size: @circle-size + 10px;
@outside-circle-border: 2px;
@outside-circle-margin: ((@outside-circle-size / 2) + @outside-circle-border) * -1;

.button{
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 14px;
  font-weight: 100;
  font-family: "Segoe UI";
  letter-spacing: 1px;

  &:before{
    border-radius: @circle-size;
    border: @outside-circle-border solid #468cdc;
    box-shadow: 0 0 15px rgba(0, 255, 204, 0.15), 0 0 15px rgba(0, 255, 204, 0.15) inset;
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    height: @outside-circle-size;
    width: @outside-circle-size;
    margin-left: @outside-circle-margin;
    margin-top: @outside-circle-margin;    
    opacity: 1;
    transform: scale(1);
    transition: all 300ms;
  }
  
  &:hover:before{
    transform: scale(1.05);
  }
  
  &.circle{
    background: #23466e;
    border: none;
    border-radius: 900px;
    color: #e4ecfa;
    cursor: pointer;
    display: block;
    width: @circle-size;
    height: @circle-size;  
    line-height: @circle-size;  
    position: relative;
    margin: auto;
    margin-top: 25px;
    transition: 0.5s;
    
    &:hover {
      background: #3e70aa;
      padding: -2px;
    }
  }
}

.container{
  background-color: rgb(5, 40, 60);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  overflow: auto;
}
 
Para wordpress puedes probar con el plugin Magee Shortcodes, tiene un shortcode muy parecido al que muestras. Bajas la version free del repositorio de Wordpress o desde su web https://www.mageewp.com/magee-shortcode.html
 
He usado ese plugin Magee Shortcodes hace unos meses pero para poner algunos efectos en las entradas, no en el index, pero la opcion que se menciona arriba se llama "Feature Box Shortcode", fijate aca podes ver algunos ejemplos https://www.mageewp.com/magee-shortcode-guide.html#6
 
Muy bueno belial9826, te lo has currado
 
pero amigo eso es un plugions?
 


Hola veo que manipulas el css, sabes como hacer para que mi logo pueda ocupar todo el header? ya que solo ocupa un lado izquierdo y quiero crear un banner que ocupe todo arriba
 
URL por MP, aunque puedes aplicarle un width y max-width de 100% a la imagen para que tome todo el ancho... a no ser que haya un padding o algo que impida lo que quieres...

Hola veo que manipulas el css, sabes como hacer para que mi logo pueda ocupar todo el header? ya que solo ocupa un lado izquierdo y quiero crear un banner que ocupe todo arriba
Ver el archivo adjunto 83758