body {
    width: 100%;
    height: 100vh;
}
.containButton {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.button1, .button2, .button3 {
    width: 200px;
    height: 230px;
    border: 1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    margin: 2rem;
    flex-direction: column;
}
/*bUTTONS*/
/*Button 01*/
button,
button:focus {
  font-size: 17px;
  padding: 10px 25px;
  border-radius: 0.7rem;
  background-image: linear-gradient(rgb(214, 202, 254), rgb(158, 129, 254));
  border: 2px solid rgb(50, 50, 50);
  border-bottom: 5px solid rgb(50, 50, 50);
  box-shadow: 0px 1px 6px 0px rgb(158, 129, 254);
  transform: translate(0, -3px);
  cursor: pointer;
  transition: 0.2s;
  transition-timing-function: linear;
}
button:active {
  transform: translate(0, 0);
  border-bottom: 2px solid rgb(50, 50, 50);
}
/*Button 02*/
.button02 {
    font-family: inherit;
    font-size: 20px;
    background: #212121;
    color: white;
    fill: rgb(155, 153, 153);
    padding: 0.7em 1em;
    padding-left: 0.9em;
    display: flex;
    align-items: center;
    cursor: pointer;
    border: none;
    border-radius: 15px;
    font-weight: 1000;
}
.button02 span {
display: block;
margin-left: 0.3em;
transition: all 0.3s ease-in-out;
}
.button02 svg {
display: block;
transform-origin: center center;
transition: transform 0.3s ease-in-out;
}
.button02:hover {
background: #000;
}
.button02:hover .svg-wrapper {
transform: scale(1.25);
transition: 0.5s linear;
}
.button02:hover svg {
transform: translateX(1.2em) scale(1.1);
fill: #fff;
}
.button02:hover span {
opacity: 0;
transition: 0.5s linear;
}
.button02:active {
transform: scale(0.95);
}
/*button 03*/
.button {
    --main-focus: #2d8cf0;
    --font-color: #323232;
    --bg-color-sub: #dedede;
    --bg-color: #eee;
    --main-color: #323232;
    position: relative;
    width: 175px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border: 2px solid var(--main-color);
    box-shadow: 4px 4px var(--main-color);
    background-color: var(--bg-color);
    border-radius: 10px;
    overflow: hidden;
}
.button, .button__icon, .button__text {
transition: all 0.3s;
}
.button .button__text {
transform: translateX(22px);
color: var(--font-color);
font-weight: 600;
}
.button .button__icon {
position: absolute;
transform: translateX(109px);
height: 100%;
width: 39px;
background-color: var(--bg-color-sub);
display: flex;
align-items: center;
justify-content: center;
}
.button .svg {
width: 20px;
fill: var(--main-color);
}
.button:hover {
background: var(--bg-color);
}
.button:hover .button__text {
color: transparent;
}
.button:hover .button__icon {
width: 148px;
transform: translateX(0);
}
.button:active {
transform: translate(3px, 3px);
box-shadow: 0px 0px var(--main-color);
}
/*media queri*/
@media (width <= 768px) {
    .containButton {
        width: 90%;
        margin: 0 auto;
        height: auto;
        padding: 2rem 0;
        overflow: hidden;
        flex-direction: column;
    }
}