.admin { position: fixed; bottom: 40px; right: 0; padding: 5px; transform: translateX(100%); background-color: rgba(104, 58, 148, 0.35); transition: transform 400ms ease-in-out; border-radius: 5px; z-index: 100; } .admin > .button { color: #673ab7; margin: 5px; border-radius: 10px; padding: 2px 10px; } .admin > .button:hover { background-color: #e0cfff; cursor: pointer; } .admin > .switch { position: absolute; right: 100%; width: 40px; height: 40px; top: 50%; border-radius: 5px 0 0 5px; transform: translateY(-50%); background-color: rgba(104, 58, 148, 0.5); cursor: pointer; } .admin > .switch::before { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; transform: translate(-25%, -50%) rotateZ(45deg); transition: transform 400ms ease-in-out; } .admin > .switch::before { border-bottom: 5px solid white; border-left: 5px solid white; } .admin.open > .switch::before { transform: translate(-60%, -50%) rotateZ(225deg); transition: transform 400ms ease-in-out; } .admin.open { transform: translateX(0); transition: transform 400ms ease-in-out; }