Mudanças entre as edições de "Widget:ItemButton"
Ir para navegação
Ir para pesquisar
| Linha 1: | Linha 1: | ||
<style> | <style> | ||
.item-card-square { | .item-card-square { | ||
<!-- Dimensões e Estilos Básicos --> | |||
width: 100px; | width: 100px; | ||
height: 100px; | height: 100px; | ||
| Linha 12: | Linha 12: | ||
overflow: hidden; | overflow: hidden; | ||
<!-- Layout Interno --> | |||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
| Linha 19: | Linha 19: | ||
text-align: center; | text-align: center; | ||
<!-- Transições para o Hover (Deixa a animação suave) --> | |||
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease-out; | transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease-out; | ||
border: 2px solid white; /* Borda branca fixa */ | border: 2px solid white; /* Borda branca fixa */ | ||
} | } | ||
<!-- Estilo para o link de cobertura de 100% (tag <a> nativa) --> | |||
.item-card-square a { | .item-card-square a { | ||
position: absolute; | position: absolute; | ||
| Linha 36: | Linha 36: | ||
} | } | ||
<!-- Estilo para o Texto Interno --> | |||
.item-card-square .item-label { | .item-card-square .item-label { | ||
font-size: 14px; | font-size: 14px; | ||
| Linha 47: | Linha 47: | ||
} | } | ||
<!-- EFEITO HOVER: Eleva e muda sutilmente a cor --> | |||
.item-card-square:hover { | .item-card-square:hover { | ||
transform: translateY(-5px); | transform: translateY(-5px); <!-- Efeito de elevação --> | ||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); | 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) --> | |||
.item-card-square.blue-bg:hover { | .item-card-square.blue-bg:hover { | ||
background-color: #2980b9 !important; | background-color: #2980b9 !important; | ||
Edição das 22h03min de 11 de outubro de 2025
<style> .item-card-square {
width: 100px; height: 100px; border-radius: 12px; margin: 0 auto; padding-top: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); cursor: pointer; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease-out; border: 2px solid white; /* Borda branca fixa */
}
.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]]