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
IZDASHJA
Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
Yo tambien estoy interesada alguien sabe?
belial9826
Dseda
Redactor
Verificación en dos pasos activada
Verificado por Whatsapp
Acabo de hacer algo parecido y tiene la siguiente estructura:
El resto es CSS 😉
Si puedes ver, el tamaño de la imagen varia, o en lugar de tener una imagen puedes usar un icon de fontawesome...
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...
F
farwodz
Beta
Programador
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
te puede servir esto ?¿
HTML
CSS
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;
}
S
soropapai
Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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
T
TomeTe
Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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
A
angelmc85
Beta
Verificado por Whatsapp
Muy bueno belial9826, te lo has currado
E
edap7227
Alfa
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
pero amigo eso es un plugions?
Adrian Cavero
Zeta
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
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
Dseda
Redactor
Verificación en dos pasos activada
Verificado por Whatsapp
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...
Temas similares
