Schede HTML con pulsante Chiudi

646 ByBy.inc

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

18 October 2025

Esempio di pulsante HTML di base

29 August 2025

Esempio di contenitore di animazione CSS

28 November 2024

Slider orizzontale puro con menu scorrevole

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #181D28;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

.animation-container {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background:transparent;
}

.tab {
  position: absolute;
  width: 250px;
  height: 100px;
  background: #292B33; 
  border-radius: 10px; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  animation: tabSlide 10s linear infinite; 
}
.tab:before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #292B33 transparent transparent transparent;
  border-width: 0 8px 8px 8px;
  animation: tabBlink 2s linear infinite alternate;
}

.tab .content {
  padding: 15px 20px;
  color: #E6DB74;
  display: flex; 
  justify-content: space-between;
  align-items: flex-end; 
}
.tab .close { 
  display: inline-block; 
  background: #75715E; 
  border-radius: 50%; 
  width: 24px; 
  height: 24px; 
  font-size: 16px; 
  text-align: center; 
  line-height: 24px; 
  color: #F8F8F2; 
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s;    
}
.tab .close:hover {
  opacity: 1;
}

@keyframes tabSlide {
    0% { transform: translateY(-100px);  }
    50% { transform: translateY(0); }
    100% { transform: translateY(100px); }  
}

@keyframes tabBlink {
  0% { border-width: 0 8px 8px 8px; }
  50% { border-width: 0 16px 16px 16px; }
  100% { border-width: 0 8px 8px 8px; } 
}

Consigliato

Esempio di pulsante HTML di base

Esempio di contenitore di animazione CSS

Slider orizzontale puro con menu scorrevole

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS