Mudanças entre as edições de "Widget:Teste"
| Linha 55: | Linha 55: | ||
<div class="home-button-item"> | <div class="home-button-item"> | ||
<a href="/index.php/ | <a href="/index.php/Benefícios_VIP" title="VIP"> | ||
<div class="home-button-image"> | <div class="home-button-image"> | ||
<img src="https://wiki.gla.com.br/images/ | <img src="https://wiki.gla.com.br/images/0/08/Missoes_card.png" alt="Benefícios VIP"> | ||
</div> | </div> | ||
<div class="home-button-title"> | <div class="home-button-title">VIP</div> | ||
</a> | </a> | ||
</div> | </div> | ||
| Linha 66: | Linha 66: | ||
<a href="/index.php/Conquistas" title="Conquistas"> | <a href="/index.php/Conquistas" title="Conquistas"> | ||
<div class="home-button-image"> | <div class="home-button-image"> | ||
<img src="https://wiki.gla.com.br/images/ | <img src="https://wiki.gla.com.br/images/0/08/Missoes_card.png" alt="Conquistas"> | ||
</div> | </div> | ||
<div class="home-button-title"> | <div class="home-button-title">Conquistas</div> | ||
</a> | </a> | ||
</div> | </div> | ||
| Linha 88: | Linha 88: | ||
border-radius: 8px; | border-radius: 8px; | ||
background: #fff; | background: #fff; | ||
transition: box-shadow 0. | transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
.home-button-item:hover { | .home-button-item:hover { | ||
transform: translateY(-5px); | |||
border-color: #007bff; | border-color: #007bff; | ||
box-shadow: 0 | box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); | ||
} | } | ||
.home-button- | .home-button-image { | ||
width: 100%; | |||
aspect-ratio: 16/9; | |||
display: block; | display: block; | ||
margin: 0; | |||
padding: 0; | |||
} | } | ||
.home-button-image { | .home-button-image a { | ||
display: block; | |||
width: 100%; | width: 100%; | ||
height: 100%; | |||
} | } | ||
| Linha 114: | Linha 117: | ||
object-fit: cover; | object-fit: cover; | ||
display: block; | display: block; | ||
transition: | transition: filter 0.3s ease; | ||
} | |||
.home-button-item:hover .home-button-image img { | |||
filter: brightness(1.1); | |||
} | } | ||
| Linha 128: | Linha 135: | ||
border-top: 1px solid #ddd; | border-top: 1px solid #ddd; | ||
text-align: center; | text-align: center; | ||
transition: background-color 0. | transition: background-color 0.3s ease; | ||
} | } | ||
Edição das 01h59min de 30 de março de 2025
<style> .home-button-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 10px; box-sizing: border-box; }
.home-button-item { position: relative; overflow: hidden; border: 1px solid #ddd; border-radius: 8px; background: #fff; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; box-sizing: border-box; }
.home-button-item:hover { transform: translateY(-5px); border-color: #007bff; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); }
.home-button-image { width: 100%; aspect-ratio: 16/9; display: block; margin: 0; padding: 0; }
.home-button-image a { display: block; width: 100%; height: 100%; }
.home-button-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.3s ease; }
.home-button-item:hover .home-button-image img { filter: brightness(1.1); }
.home-button-title { font-weight: bold; font-size: 1.1em; background: #fff; color: #000; margin: 0; padding: 10px 5px; position: relative; text-transform: uppercase; border-top: 1px solid #ddd; text-align: center; transition: background-color 0.3s ease; }
.home-button-item:hover .home-button-title { background-color: #f9f9f9; }
@media (max-width: 1280px) { .home-button-container { grid-template-columns: repeat(2, 1fr); } } </style>