Mudanças entre as edições de "Widget:Teste"
Ir para navegação
Ir para pesquisar
Etiqueta: Revertido |
Etiqueta: Revertido |
||
| Linha 93: | Linha 93: | ||
position: relative; | position: relative; | ||
overflow: hidden; | overflow: hidden; | ||
border: | border: 3px solid; | ||
border-image: linear-gradient(to bottom, #ccc, #0077ff) 1; | |||
border-radius: 8px; | border-radius: 8px; | ||
background: #ffffff; | background: #ffffff; | ||
transition: filter 0.2s ease, transform 0.2s ease; | transition: filter 0.2s ease, transform 0.2s ease; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | |||
.home-button-item:hover { | |||
filter: brightness(1.03); | |||
transform: translateY(-2px); | |||
} | } | ||
| Linha 116: | Linha 120: | ||
pointer-events: none; | pointer-events: none; | ||
z-index: 1; | z-index: 1; | ||
} | } | ||
Edição das 14h17min de 6 de maio de 2025
<style> .home-button-container {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 10px; box-sizing: border-box;
}
.home-button-item {
position: relative; overflow: hidden; border: 3px solid; border-image: linear-gradient(to bottom, #ccc, #0077ff) 1; border-radius: 8px; background: #ffffff; transition: filter 0.2s ease, transform 0.2s ease; box-sizing: border-box;
}
.home-button-item:hover {
filter: brightness(1.03); transform: translateY(-2px);
}
.home-button-item::before {
content: ; position: absolute; inset: 0; border-radius: 8px; padding: 1px; background: linear-gradient(to bottom, #ccc, #0077ff); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; pointer-events: none; z-index: 1;
}
.home-button-item a {
display: block; text-decoration: none; color: inherit; position: relative; z-index: 2;
}
.home-button-image {
width: 100%; aspect-ratio: 16/9; display: block; margin: 0; padding: 0;
}
.home-button-image img {
width: 100%; height: 100%; object-fit: cover; display: block; border-top-left-radius: 8px; border-top-right-radius: 8px; transition: filter 0.2s ease;
}
.home-button-title {
font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.05em; background: #f0f0f0; color: #111; margin: 0; padding: 8px 4px; text-align: center; text-transform: uppercase; border-top: 1px solid #ddd; transition: background-color 0.2s ease;
}
.home-button-item.disabled {
opacity: 0.4; pointer-events: none; filter: grayscale(100%);
}
.home-button-item.disabled .home-button-title {
color: #999;
}
@media (max-width: 1280px) {
.home-button-container {
grid-template-columns: repeat(2, 1fr);
}
} </style>