Como colocar botões em design web - Preciso de ajuda

edap7227 · 18/08/2016

buenas Amigo queria saber si alguien me ayudaba a como poder colocar estos botones en mi web

IZDASHJA · 18/08/2016

Yo tambien estoy interesada alguien sabe?

belial9826 · 18/08/2016

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...

farwodz · 18/08/2016

te puede servir esto ?¿

HTML

Inserir CODE, HTML ou PHP:

<div class="container">
  <a class="button circle" href="#">welcome</a>
</div>

CSS

Inserir CODE, HTML ou 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;
}

soropapai · 18/08/2016

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

TomeTe · 18/08/2016

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

angelmc85 · 19/08/2016

Muy bueno belial9826, te lo has currado

edap7227 · 20/08/2016

pero amigo eso es un plugions?

Adrian Cavero · 20/08/2016

belial9826 disse:

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...

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

belial9826 · 21/08/2016

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...

WindowsHQ disse:
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 o anexo 83758

Como colocar botões em design web - Preciso de ajuda

edap7227

IZDASHJA

belial9826

farwodz

soropapai

TomeTe

angelmc85

edap7227

Adrian Cavero

belial9826

Tópicos similares