button{ border: none; background: none; outline: none; cursor: pointer; }

.button{ background: var(--yellow); color: var(--black); text-decoration: none; padding: 7px 10px; display: inline-flex; transition: var(--transition); font-family: var(--poppins); position: relative; font-size: 13px; font-weight: 500; border-radius: 5px; align-items: center; line-height: 1; } 
.button:hover{ background: var(--yellow-100); }

/* Reverse */
.button.reverse{ background: var(--grey-222); color: var(--white); transition: var(--transition); }
.button.reverse:hover{ color: var(--yellow); }

/* Arrowed */
.button.arrowed{ padding-right: 26px; }
.button.arrowed i{ font-size: 15px; margin-left: 5px; transition: var(--transition); position: absolute; right: 7px; }
.button.arrowed:hover i{ transform: translateX(2px); }