The microinteraction safari

Open In Editor Publish Your Code

.animation-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background-color: #000;
}
.button {
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  width: 200px;
  height: 50px;
  margin-bottom: 20px;
}

.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 50px;
  background-color: #F8F8F2;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.button:hover::before {
  transform: scaleX(1);
}

.form-input {
  background: transparent;
  border: none;
  color: #F8F8F2;
  width: 200px;
  padding: 10px;
  border-radius: 8px;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.form-input:focus {
  opacity: 1;
}

.spinner {
  border: 4px solid #F8F8F2;
  border-top: 4px solid #AE81FF;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-right: 20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

The microinteraction safari

Recommended

The Syntax Symphony

The code whisperer

The Walk of Life

HTML

CSS

JS

Recommended

The Syntax Symphony

The code whisperer

The Walk of Life

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS