🧑‍💻| البرمجة

CSS: .button {

  position: relative;

  border-radius: 8px;

  border: none;

  padding: 12px 24px;

  cursor: pointer;

  background-color: black;

  color: white;

  z-index: 1;

  overflow: hidden;

  display: inline-block;

  transition: transform 0.2s ease-in-out;

}

.button::before {

  content: "";

  position: absolute;

  top: -50%;

  left: -50%;

  width: 200%;

  height: 200%;

  background: conic-gradient(

    #ff0000,

    #ff7f00,

    #ffff00,

    #00ff00,

    #0000ff,

    #4b0082,

    #8b00ff,

    #ff0000

  );

  animation: rotate 3s linear infinite;

  z-index: -2;

}

.button::after {

  content: "";

  position: absolute;

  inset: 3px;

  background: black;

  border-radius: 6px;

  z-index: -1;

}

@keyframes rotate {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(360deg);

  }

}

.button:hover {

  transform: scale(1.1);

}

.button:active {

  transform: scale(0.9);

}