create call-to-action button which expands on mouse hover - html

Question

I want to reproduce buttons like those
so I found this code
#import "https://fonts.googleapis.com/css?
family=Didact+Gothic&subset=greek";
#import "https://cdn.linearicons.com/free/1.0.0/icon-font.min.css";
body {
font-family: 'Didact Gothic', sans-serif;
letter-spacing: 1px;
font-weight: bold;
}
.side-menu {
display: flex;
flex-wrap: wrap;
max-width: 300px;
position: fixed;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.side-menu > * + * {
margin-top: 0.5em;
}
.btn {
display: flex;
color: #fff;
flex: 100%;
transition: -webkit-transform 0.2s ease-out;
transition: transform 0.2s ease-out;
transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
-webkit-transform: translateX(236px);
transform: translateX(236px);
text-decoration: none;
}
.btn:hover {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
.btn__icon {
flex: 0 0 32px;
padding: 1rem;
font-size: 2em;
background-color: #ff6347;
}
.btn__text {
flex: 0 0 100%;
display: flex;
align-items: center;
padding: 1rem;
background-color: #ff927e;
}
that creates the same buttons.Only problem is that when I try to recreate them to my CSS header file,I get the correct functionality but not the position and the layout (color etc).I copy the first part to the and I call it on header by the second command.
<a href="#" class="btn" > <button> register </button></a>
probably it’s something dummy I ‘m messing but I ‘m only now starting with CSS..

Answer 1

I cant understand the problem exactly and I haven't implement all your styles but this is the main idea
<div class="button-wrapper">
<div>Button</div>
<div>Button</div>
<div>Button</div>
</div>
.button-wrapper {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%)
}
.button-wrapper > div {
background : orange;
padding: .4rem;
margin-bottom: 5px;
transform: translateX(50%);
transition: transform 0.2s ease-out;
}
.button-wrapper > div:hover {
transform: translate(0%)
}