Galera! Boa tarde!
Fiz uma div com imagem e quero q o texto apareça em baixo mas centralizado.. não estou conseguindo de jeito nenhum.. alguem pode me ajudar por favor?
*Obs: usei um cód que achei na internet para esse button *
Galera! Boa tarde!
Fiz uma div com imagem e quero q o texto apareça em baixo mas centralizado.. não estou conseguindo de jeito nenhum.. alguem pode me ajudar por favor?
*Obs: usei um cód que achei na internet para esse button *
Essa é a parte no HTML
<div class="produtos">
<h1>Alguns de nossos serviços</h1>
<div class="produtos-list">
<ul>
<li>
<img src="cafe.png" >
<button class="btn-shine">
<span>Cafes</span>
</button>
</li>
Esse é a parte no CSS
.produtos {
margin-top: 20px;
background-color: #21201e; /* paleta de cor*/
max-width: 1800px;
height: 600px;
}
.produtos h1 {
text-align: center;
padding-top: 30px;
color: white;
font-size: 50px;
}
ul {
margin-top: 2cm;
margin-bottom: 2cm;
list-style: none;
display: flex;
justify-content: space-around;
border: #FFFAF0;
}
.produtos-list img {
width: 280px;
height: 250px;
align-items: center;
border-radius: 10px;
}
.produtos-list li {
align-items: center;
}
button {
position: relative;
margin: 10px;
padding: 20px 35px;
outline: none;
text-decoration:none;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
text-transform: uppercase;
background-color: #21201e;
border: 1px solid #ff671f;
border-radius: 10px;
color: #ff671f;
font-weight: 400;
font-family: inherit;
z-index: 0;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
cursor:unset;
}
button span {
color: #ffffff;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.7px;
}
button:hover {
animation: rotate624 0.7s ease-in-out both;
}
button:hover span {
animation: storm1261 0.7s ease-in-out both;
animation-delay: 0.06s;
}
@keyframes rotate624 {
0% {
transform: rotate(0deg) translate3d(0, 0, 0);
}
25% {
transform: rotate(3deg) translate3d(0, 0, 0);
}
50% {
transform: rotate(-3deg) translate3d(0, 0, 0);
}
75% {
transform: rotate(1deg) translate3d(0, 0, 0);
}
100% {
transform: rotate(0deg) translate3d(0, 0, 0);
}
}
@keyframes storm1261 {
0% {
transform: translate3d(0, 0, 0) translateZ(0);
}
25% {
transform: translate3d(4px, 0, 0) translateZ(0);
}
50% {
transform: translate3d(-3px, 0, 0) translateZ(0);
}
75% {
transform: translate3d(2px, 0, 0) translateZ(0);
}
100% {
transform: translate3d(0, 0, 0) translateZ(0);
}
}
.btn-shine {
border: 3px solid;
overflow: hidden;
position: relative;
}
.btn-shine span {
z-index: 20;
}
.btn-shine:after {
background: #ff671f;
content: "";
height: 155px;
left: -75px;
opacity: 0.4;
position: absolute;
top: -50px;
transform: rotate(35deg);
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
width: 50px;
z-index: -10;
}
.btn-shine:hover:after {
left: 120%;
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}
Olá Katry todo bem? Olha verifique as margins dos elementos! Pode ser que estejam grandes demais, também verifique o tipo de display ultilizado se é correto!
Uma dica e ir na página no navegador, abrir no inspecionar página e verificar os elementos, lá você vai poder verificar se os elementos estão com algum tipo de espaçamento!
Katry, acredito que você deseje centralizar corretamente esse botões. Existe uma forma simples de resolver isso:
Basta acrescentar um flexbox e logo depois realizar a quebra de coluna com flex-direction, alinhando e centralizando o botão ao centro (align-items e text-align).
Acrescente isso na classe .produtos-list li:
.produtos-list li {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
Tinha interesse em apresentar essa explicação de uma forma mais simples, mas o html apresentado e o html da imagem não são os mesmos, acredito que o código acima deixará os botões ao centro.
Uauuuuuuu!! Muito obrigado Mateus e Matheus! Funcionou perfeitamente!.... Eu tentei de tudo, inclusive abrir varias vezes a página de inspecionar mas NADA funcionava. e eu nao conseguiria descobrir isso sozinha!! Valeu pela ajuda meninos!!