Widget:ItemButton

<widget> <style> /* * ESTILOS CSS GLOBAIS PARA OS BOTÕES (100x100)

* Isso garante que o CSS avançado (como :hover) funcione.
*/

.item-card-square {

   /* Dimensões e Estilos Básicos */
   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;
   
   /* Layout Interno */
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: 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;
   border: 2px solid white; /* Borda branca fixa */

}

/* Estilo para o link de cobertura de 100% (tag <a> nativa) */ .item-card-square a {

   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 10;
   text-decoration: none;
   display: block;

}

/* Estilo para o Texto Interno */ .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;

}

/* ---------------------------------------------------- */ /* EFEITO HOVER: Eleva e muda sutilmente a cor */ /* ---------------------------------------------------- */

.item-card-square:hover {

   transform: translateY(-5px); /* Efeito de elevação */
   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 {

   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]]

       Predefinição:Label

</widget>