lUser L

Это сделано через псевдо элементы before, after. Самой кнопке задается свойство

.btn {
   position: relative;
}

а псевдо элементу

.btn:before {
    content: '';
    position: absolute;
    left: -25px;
    bottom: -30px;
    width: 30px;
    height: 30px;
    background: blue;
    transition: .8s ease;
    border-radius: 25px;
    z-index: -1;
}

далее при .btn:hover обращаемся к псевдо элементу
и задаем позицию и высоту с шириной

.btn:hover:before {
}

демка

Для любителей CSSBDSM

У вас же jq подключен к проекту, почему бы не сделать это на jq потратив минимум усилий ?

fadein
fadeout
show
hide
fadeToggle
toggle

https://jsfiddle.net/znhvu6sd/

mix-blend-mode
https://jsfiddle.net/b12Lqz05/

Но я бы на js сделал, на css не получится полностью рабочий вариант сделать, в примере выше например видно

Как вариант расширение Fonts Ninja

Используй toggleClass()

https://jsfiddle.net/nvx7tpy5/

https://jsfiddle.net/zrd682uL/1/

.upper-footer span {
    color: rgba(114, 52, 26, 0.89);
    font-size: 20px;
    font-weight: bold;
    width: 994px;
}

width: 994px; - тут проблема

.main_li {
    flex-shrink: 0;
}

https://codepen.io/5h4dy_s/pen/GRrbXLb

https://codepen.io/5h4dy_s/pen/zYNzEVX
родителю relative, дочке - absolute

grid
masonry

Классу .taskItems нужно флексить, а не .tasks

Это реально вопрос о копипасте, то есть, вы спрашиваете тут как копипастить ? ctr+c - копировать. ctrl+v - вставить.

Копируете блок .card и вставляете ниже несколько раз, потом просто редактируете

Класу .container даете свойство

.container { 
  flex-wrap: wrap;
}