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

Hello @bananasplit,

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/

I apologize. The button code should have been:

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

I forgot a closing quote.

really thanks about the quick reply!!this solution seems perfect!!is there a way to put this button to any position I want?let’s say right or left,bottom or header?or I have to stick with template’s positions?I was thinking something like that:

{
    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..

• This reply was modified 6 years, 4 months ago by bananasplit.

Interesting… it’s useful.

it’s quite interesting!It’s working great!!It does the work needed.But I had in mind something different.please check this website.I want to make something like the one with the calculator icon.when the mouse hovers over it expands to the left and it offers you an option to click the link provided..To me it appears that it needs javascript,but a question never harmed anyone!so maybe you have an idea how to reproduce something like this!

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

<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..