One way to tackle this would be using CSS. Without getting too deep, CSS can be how you decide what a button looks like during certain actions, like when a user hovers.

For example, if you have following html code:
<a href="calltoactionlink.com" class="call-to-action><button>Some text here!</button></a>

You could use the following css code:

/*Regular button */
a.call-to-action button {
  padding: 5px;
  background-color: blue;
}

/*button on hover*/
a.call-to-action:hover button {
  padding: 15px;
  background-color: green;
}

Here is a link to a collection of CSS buttons as examples:
https://1stwebdesigner.com/10-pure-css-call-action-button-sets/

<a href="calltoactionlink.com" class="call-to-action"><button>Some text here!</button></a>

I forgot a closing quote.

{
    position: fixed;
    right: 100px;
    top: 150px;
}

But will it work properly?I had in mind something like the site I have in my previous message..

@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;
}

<a href="#" class="btn" > <button> register </button></a>
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 <style> and I call it on header by the second command.
probably it’s something dummy I ‘m messing but I ‘m only now starting with CSS..