* { margin: 0px; }
* { padding: 0px; }

header h1{                                                                                  /* Настройка заголовка */
    text-align: center;
    margin-top: 2%;
    font-size: 4em;
    text-transform: uppercase;
    font-weight: 800;
}

.wrapper_button{                                                                            /* область для размещения кнопок, центрированная по центру */
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    transform: scale(0.7);                                                                  /* чтобы сильно не заморачиваться сразу изменил все кнопки */
}

.buttons{                                                                                   /* контейнер для каждой кнопки с подписью внизу */
    width: 200px;
    height: 250px;
    margin: 0 1.5% 1% 1.5%;
    float: left;
    font-size: 60px;
}

.buttons a{                                                                                 /* ссылка кнопки в контейнере для кнопки */
    width: 200px;
    height: 200px;
    border: 1px dotted lightgrey;
    display: block;
}

.addon_buttons{                                                                             /* подпись для кнопки в контейнере для кнопки */
    height: 50px;
    font-size: 18px;
    text-align: center;    
    overflow: hidden;
}

.download{                                                                                  /* контейнер для ссылок для сканичивания html/css-кода */
    position: fixed;   
    bottom: 0;
    right: 0;
    margin-right: 10em;
    margin-bottom: 10em;
}

.download a{                                                                                /* форматирование ссылок для сканичивания html/css-кода */
    color: blue;
    text-decoration: underline;
}

a{                                                                                          /* общее форматирование для всех ссылок (актуально для кнопок) */
    color: black;
    text-decoration: none;
}

/***************************************************************************************************************************************************************/

#button_001{
    background-color: lightpink;
    border-radius: 50% 50%;
    line-height: 200px;
    text-align: center;
    font-weight: 600;
}

#button_001_wrapper:hover #button_001{
    animation-name: button_001_anime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes button_001_anime{
    100% { transform: scale(1.25); border: 1px solid black; position: absolute; }         /* position: absolute уберёт надпись под кнопкой, т.к. absolute отделён от стандартного потока и надпись сместится выше. Но селектор ниже сделает это лучше */                  
}

#button_001_wrapper:hover > .addon_buttons{                                                 /* убрать надпись под кнопкой */
    opacity: 0;
}

/***************************************************************************************************************************************************************/

#button_002{
    background-color: lightgreen;
    border-radius: 20px;
    line-height: 200px;
    text-align: center;
    font-weight: 600;
}

#button_002_wrapper:hover #button_002{
    animation-name: button_002_anime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes button_002_anime{
    100% { width: 250px; height: 125px; line-height: 125px; position: absolute; }           /* position: absolute уберёт надпись под кнопкой, т.к. absolute отделён от стандартного потока и надпись сместится выше. Но селектор ниже сделает это лучше */                  
}

#button_002_wrapper:hover > .addon_buttons{                                                 /* убрать надпись под кнопкой */
    opacity: 0;
}

/***************************************************************************************************************************************************************/

#button_003{
    background-color: orange;
    border-radius: 20px;
    line-height: 200px;
    text-align: center;
    font-weight: 600;
    border: 1px solid blue;
}

#button_003_wrapper:hover #button_003{
    animation-name: button_003_anime;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}
@keyframes button_003_anime{
    100% { 
        transform: rotate(360deg);
        position: absolute; }                                                               /* position: absolute уберёт надпись под кнопкой, т.к. absolute отделён от стандартного потока и надпись сместится выше. Но селектор ниже сделает это лучше */                  
    }
    
#button_003_wrapper:hover > .addon_buttons{                                                 /* убрать надпись под кнопкой */
    opacity: 0;
}

/***************************************************************************************************************************************************************/

#button_004{
    background-color: lightblue;
    border-radius: 20px;
    line-height: 200px;
    text-align: center;
    font-weight: 600;
    border: 1px solid blue;
}

#button_004_wrapper:hover #button_004{
    animation-name: button_004_anime;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}
@keyframes button_004_anime{
    100% { 
        transform: rotate3d(0.4, 0.8, 1, 360deg);                                           /* для разного 3d-эффекта поиграться значениями */
        box-shadow: 5px 5px;
        position: absolute; }                                                               /* position: absolute уберёт надпись под кнопкой, т.к. absolute отделён от стандартного потока и надпись сместится выше. Но селектор ниже сделает это лучше */                  
    }
    
#button_004_wrapper:hover > .addon_buttons{                                                 /* убрать надпись под кнопкой */
    opacity: 0;
}

/***************************************************************************************************************************************************************/

/***************************************************************************************************************************************************************/

#button_005{
    background-color: lightskyblue;
    border-radius: 20px;
    line-height: 200px;
    text-align: center;
    font-weight: 600;
    border: 1px solid blue;
}

#button_005_wrapper:hover #button_005{
    animation-name: button_005_anime;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}
@keyframes button_005_anime{
    100% { 
        transform: rotate3d(1, 0.8, 0.4, 360deg);                                           /* для разного 3d-эффекта поиграться значениями */
        box-shadow: inset 0 0 50px 50px rgba(0,0,0,0.5), 0 0 5px 5px rgba(0,0,0,0.5);
        position: absolute; }                                                               /* position: absolute уберёт надпись под кнопкой, т.к. absolute отделён от стандартного потока и надпись сместится выше. Но селектор ниже сделает это лучше */                  
    }
    
#button_005_wrapper:hover > .addon_buttons{                                                 /* убрать надпись под кнопкой */
    opacity: 0;
}

/***************************************************************************************************************************************************************/

#button_006{
    background-color: lightcyan;
    border-radius: 20px;
    line-height: 200px;
    text-align: center;
    font-weight: 600;
    border: 1px solid lightskyblue;
}

#button_006_wrapper:hover #button_006{
    animation-name: button_006_anime;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}
@keyframes button_006_anime{
    100% { 
        transform: rotate3d(0.8, 1, 0.4, -720deg);                                          /* для разного 3d-эффекта поиграться значениями */
        box-shadow: inset 0 0 60px 60px rgba(0,0,200,0.5), 0 0 5px 5px rgba(0,0,200,0.5);
        position: absolute; }                                                               /* position: absolute уберёт надпись под кнопкой, т.к. absolute отделён от стандартного потока и надпись сместится выше. Но селектор ниже сделает это лучше */                  
    }
    
#button_006_wrapper:hover > .addon_buttons{                                                 /* убрать надпись под кнопкой */
    opacity: 0;
}

/***************************************************************************************************************************************************************/

#button_007{
    background-color: cyan;
    border-radius: 20px;
    line-height: 200px;
    text-align: center;
    font-weight: 600;
    border: 1px solid lightskyblue;
}

#button_007_wrapper:hover #button_007{
    animation-name: button_007_anime;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}
@keyframes button_007_anime{
    100% { 
        transform: rotate3d(0.8, 1, 0.4, -720deg);                                           /* для разного 3d-эффекта поиграться значениями */
        box-shadow: inset 0 0 60px 60px rgba(0,0,200,0.5), 0 0 5px 5px rgba(0,0,200,0.5);
        border-radius: 50% 50%;
        position: absolute; }                                                               /* position: absolute уберёт надпись под кнопкой, т.к. absolute отделён от стандартного потока и надпись сместится выше. Но селектор ниже сделает это лучше */                  
}

#button_007_wrapper:hover > .addon_buttons{                                                 /* убрать надпись под кнопкой */
    opacity: 0;
}

/***************************************************************************************************************************************************************/

.span_8{
    position: relative;                                                                     /* необходимо запись "Button", чтобы не происходило с анимацией всегда оставлять поверх всего */
    z-index: 2;
}

#button_008{
    position: relative;                                                                     /* необходимо записать для того, чтобы дочерний элемент с absolute знал где границы родителя */
    background-color: lightgray;
    border-radius: 5% 5%;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-weight: 600;
}

#button_008:after{
    position: absolute;                                                                     /* с помощью этого мы сбрасываем позицию в самое начало родителя */
    top: 0;
    left: 0;
    height: 100%;
    content: "";
    width: 0;                                                                               /* свойство, которое будем менять */
    box-shadow: 10px -10px 10px black;
    background-image: linear-gradient(to bottom right, red, green);
    border-radius: 5% 5%;
    z-index: 1;                                                                             /* уровень ниже записи "Button"*/
    transition: all 1.00s;
}

#button_008:hover:after{
    width: 100%;
}

#button_008:hover + .addon_buttons{                                                         /* убрать надпись под кнопкой */
    opacity: 0;
}

/***************************************************************************************************************************************************************/