How to make animation on button click?

Question

css

How to make an animation when the button is clicked so that it would stroke the block from above (for example, in the black color of the rectangle with a thin line).
I can't find it (although I've seen something similar).
Thanks in advance, I'll be very grateful.

Answer 1

https://codepen.io/Marina_Os/pen/OJyWPbL
_

Answer 2

Here is a screenshot of an example:

And there is another question: How to stretch the border to this picture so that everything covers and closes from above, like on an animation button.

<div class="btn-holder">
  <button class="btn btn-4 hover-border-7">
    <span>Зайти</span>
  </button>
</div>

* {
  box-sizing: border-box;
  margin: 0; padding: 0;
}

:active, :hover, :focus {
  outline: 0!important;
  outline-offset: 0;
}
::before,
::after {
  position: absolute;
  content: "";
}

.btn-holder {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1000px;
  margin: 10px auto 35px;
}
.btn {
  position: relative;
  display: inline-block;
  width: auto; height: auto;
  background-color: transparent;
  border: none;
  cursor: pointer;
  margin: 0px 25px 15px;
  min-width: 150px;
}
  .btn span {         
    position: relative;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    top: 0; left: 0;
    width: 100%;
    padding: 15px 20px;
    transition: 0.3s;
  }

/* 7. hover-slide-up */
.btn.hover-slide-up::before {
  bottom: 0; left: 0; right: 0; 
  height: 0%; width: 100%;
}
.btn.hover-slide-up:hover::before {
  height: 100%;
}

/*--- btn-4 ---*/
.btn-4 span {
  color: rgb(28, 31, 30);
}
.btn-4 span:hover {
  color: rgb(54, 56, 55);
}
.btn-4::before,
.btn-4::after {
  width: 15%; height: 2px;
  background-color: rgb(54, 56, 55);
  z-index: 2;
}

/* 17. hover-border-7 */
.btn.hover-border-7::before,
.btn.hover-border-7::after {
  bottom: 0;
  transition: width 0.2s 0.35s ease-out;
}
.btn.hover-border-7::before {
  right: 50%;
}
.btn.hover-border-7::after {
  left: 50%;
}
.btn.hover-border-7:hover::before,
.btn.hover-border-7:hover::after {
  width: 50%;
  transition: width 0.2s ease-in;   
}

.btn.hover-border-7 span::before,
.btn.hover-border-7 span::after {
  width: 0%; height: 0%;
  background: transparent;
  opacity: 0;
  z-index: 2;
  transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;
}
.btn.hover-border-7 span::before {
  bottom: 0; left: 0;
  border-left: 2px solid rgb(54, 56, 55);
  border-top: 2px solid rgb(54, 56, 55);
}
.btn.hover-border-7 span::after {
  bottom: 0; right: 0;
  border-right: 2px solid rgb(54, 56, 55);
  border-top: 2px solid rgb(54, 56, 55);
}
.btn.hover-border-7 span:hover::before,
.btn.hover-border-7 span:hover::after {
  width: 50%; height: 96%;
  opacity: 1;
  transition: height 0.2s 0.2s ease-in, width 0.2s 0.4s linear, opacity 0s 0.2s;   
}

It seems that in css only for this button there is a code.

Answer 3

I think horizontal sharding of the "User Items" table would be good, with the criterion of sharding by user ID.
Although, in my opinion, 19k records is not enough for sharding.

Answer 4

to mine it is necessary to design not basis, and logic of operation. You will simultaneously be "updating" all 1mil. users? For a normal database server 1mil. records is a trifle, will process quickly enough. Moreover, it will perform aggregate operations, such as counting the number of records in general on the fly. Therefore, the most successful way will be the usual sheet.
@Cyapa gave you good advice: use surrogate keys. The speed of work on them is significant, requests are reduced in size, and the logic of work becomes clear and understandable.

Answer 5

On the topic of designing a database schema, eax.me/database-design is written in detail here