گۈزەل بولغان كونۇپكا كودى

مەرھابا ، ئەزىز دوستۇم ! باسقان قەدىمىڭىز قۇتلۇق بولسۇن !
بۈگۈن تورداشلارنىڭ ھوزۇرىغا گۈزەل بولغان كونۇپكا كودى ئېلىپ كەلدىم ، چۈنكى تورخۇمار چۈشۈرۈش كۇنۇپكىسى پېقىرغا تازا يارىمىغاچقا گۈزەللەشتۈرۈش ئويى بىلەن تور ئارلاپ بۈگۈن ھەمبەھىرلىمەكچى بولغان كودنى ئۇچراتتىم ۋە مۇۋاپىقىيەتلىك ھالدا تۇرايىمغا ئۆزلەشتۈرۋالغانمۇ بولدۇم ، شۇنىڭ ئۈچۈن ئەسلي كودنى تورداشلارغا ھەمبەھىرلەشنى لايىق كۆردۈم ئەگەر تورداشلارمۇ ياقتۇرغان بولسا ئۆز توربىتىگە ئۆزلەشتۈرۈپ ئىشلەتساڭلار بولىدۇ…

html كودى

<button>HOVER ME</button>

css كودى

button {
  text-decoration:none;
  position:relative;
  border:none;
  font-size:14px;
  font-family:inherit;
  cursor:pointer;
  color:#fff;
  width:9em;
  height:3em;
  line-height:2em;
  text-align:center;
  background:linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
  background-size:300%;
  border-radius:30px;
  z-index:1;
}
button:hover {
  animation:ani 8s linear infinite;
  border:none;
}
@keyframes ani {
  0% {
  background-position:0%;
}
100% {
  background-position:400%;
}
}button:before {
  content:"";
  position:absolute;
  top:-5px;
  left:-5px;
  right:-5px;
  bottom:-5px;
  z-index:-1;
  background:linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
  background-size:400%;
  border-radius:35px;
  transition:1s;
}
button:hover::before {
  filter:blur(20px);
}
button:active {
  background:linear-gradient(32deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
}