Mudanças entre as edições de "Widget:ItemButton"
Ir para navegação
Ir para pesquisar
| (3 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) | |||
| Linha 1: | Linha 1: | ||
<style> | <style> | ||
.item- | |||
.item-grid-container { | |||
max-width: 1000px; | |||
margin: 0 auto; | |||
padding: 0 10px; | |||
margin: 0 auto; | display: flex; | ||
padding | flex-wrap: wrap; | ||
gap: 20px; | |||
width: 100%; | |||
box-sizing: border-box; | |||
} | |||
display: flex; | |||
flex- | |||
} | |||
<!-- Estilo para o link de cobertura de 100% (tag <a> nativa) --> | <!-- Estilo para o link de cobertura de 100% (tag <a> nativa) --> | ||
.item-card-square a { | .item-card-square a { | ||
position: absolute; | position: absolute; | ||
top: 0; | top: 0; | ||
| Linha 34: | Linha 22: | ||
text-decoration: none; | text-decoration: none; | ||
display: block; | display: block; | ||
} | } | ||
<!-- Estilo para o Texto Interno --> | <!-- Estilo para o Texto Interno --> | ||
.item-card-square .item-label { | .item-card-square .item-label { | ||
font-size: 14px; | font-size: 14px; | ||
color: white; | color: white; | ||
| Linha 45: | Linha 33: | ||
margin-top: 5px; | margin-top: 5px; | ||
line-height: 1.2; | line-height: 1.2; | ||
} | } | ||
<!-- EFEITO HOVER: Eleva e muda sutilmente a cor --> | <!-- EFEITO HOVER: Eleva e muda sutilmente a cor --> | ||
.item-card-square:hover { | .item-card-square:hover { | ||
transform: translateY(-5px); <!-- Efeito de elevação --> | transform: translateY(-5px); <!-- Efeito de elevação --> | ||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); <!-- Sombra mais profunda no hover --> | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); <!-- Sombra mais profunda no hover --> | ||
} | } | ||
<!-- HOVER: Muda a cor de fundo (para um tom mais escuro) --> | <!-- HOVER: Muda a cor de fundo (para um tom mais escuro) --> | ||
.item-card-square.blue-bg:hover { | .item-card-square.blue-bg:hover { | ||
background-color: #2980b9 !important; | background-color: #2980b9 !important; | ||
} | } | ||
.item-card-square.gold-bg:hover { | .item-card-square.gold-bg:hover { | ||
background-color: #c9951f !important; | background-color: #c9951f !important; | ||
} | } | ||
.item-card-square.green-bg:hover { | .item-card-square.green-bg:hover { | ||
background-color: #229954 !important; | background-color: #229954 !important; | ||
} | } | ||
</style> | </style> | ||
<div class="item-card-square {{color}}-bg" style="background-color: {{color}};"> | <div class="item-card-square {{color}}-bg" style="background-color: {{color}};"> | ||
<a href="/index.php/{{page}}" title="{{label}}"></a> | <a href="/index.php/{{page}}" title="{{label}}"></a> | ||
| Linha 77: | Linha 65: | ||
{{label}} | {{label}} | ||
</div> | </div> | ||
</div> | </div> | ||
Edição atual tal como às 19h44min de 15 de outubro de 2025
<style>
.item-grid-container {
max-width: 1000px;
margin: 0 auto;
padding: 0 10px;
display: flex;
flex-wrap: wrap;
gap: 20px;
width: 100%;
box-sizing: border-box;
}
.item-card-square a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
text-decoration: none;
display: block;
}
.item-card-square .item-label {
font-size: 14px;
color: white;
font-weight: bold;
position: relative;
z-index: 5;
margin-top: 5px;
line-height: 1.2;
}
.item-card-square:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.item-card-square.blue-bg:hover {
background-color: #2980b9 !important;
}
.item-card-square.gold-bg:hover {
background-color: #c9951f !important;
}
.item-card-square.green-bg:hover {
background-color: #229954 !important;
}
</style>
<a href="/index.php/Predefinição:Page" title="Predefinição:Label"></a>
[[Arquivo:Predefinição:Image|60px|semlink]]