Question 308328 in Html Question posted in
Some basic documentation can be found here.

Html – Creating a responsive button that overlaps when hovering

My professor has created the following markup for us.

<a class="btn btn-tertiary" href="#">
<span class="circle">
<i class="arrow-right">
</i>
</span>Create profile
</a>

.btn.btn-tertiary {
  position: relative;
  padding: 0;
  text-align: left;
  left: 70px;
  top: 20px;
  height: 50px;
}
.btn.btn-tertiary .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  z-index: -1;
  width: 3em;
  height: 3em;
  background: #1d99ae;
  border-radius: 2em;
  left: -60px;
  top: -10px;
}
.btn.btn-tertiary .arrow-right {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 14em;
  left: 0.625em;
  margin: auto;
  width: 0.625em;
  height: 0.625em;
  border-top: 0.125em solid #fff;
  border-right: 0.125em solid #fff;
  transform: rotate(45deg);
}
.btn.btn-tertiary:hover .circle {
  width: 100%;
}
.btn.btn-tertiary:hover {
  color: #fff;
}
<a class="btn btn-tertiary" href="#">
<span class="circle">
<i class="arrow-right">
</i>
</span>Create profile
</a>

He wants us to create a round button with a arrow icon that when hovered expands over text.
He wants it to be responsive.
I really tried my hardest and came up with the following but cannot get the hover effect to take up 100% of the width (see fiddle).

https://jsfiddle.net/x1rnjgdL/

Whats really annoying is that he does not allow the HTML to be edited. He also doesn’t wanna place the text in another span element with a class, which is what makes this so damm hard!

Can someone help?

I tried using float, position absolute or relative and using a grid. But I cannot get the hover effect to take 100% of the container width. I need this because the goal is to be able to re-use the button on multiple places. So the text can be replaced by a longer sentence or shorter one depending on the placement.

Tags:

3

Answers


  1. 0

    simply use the full viewport width and then minus 28px to make it fit nicely

    .btn.btn-tertiary:hover .circle {
  width: calc(100vw - 28px);
}

    JSFiddle

    Login or Signup to reply.
  2. 0

    Here’s an updated version of your CSS.

    .btn.btn-tertiary {
  position: relative;
  padding: 20px 20px 20px 70px;
  text-align: left;
  display: inline-block;
  color: #000;
  transition: color 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}

.btn.btn-tertiary .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  transform: translateY(-50%);
  position: absolute;
  z-index: -1;
  width: 3em;
  height: 3em;
  background: #1d99ae;
  border-radius: 2em;
  left: 0;
  top: 50%;
}

.btn.btn-tertiary .arrow-right {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 50%;
  left: 1.25em;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 0.625em;
  height: 0.625em;
  border-top: 0.125em solid #fff;
  border-right: 0.125em solid #fff;
}

.btn.btn-tertiary:hover .circle {
  width: calc(100% + 40px);
}

.btn.btn-tertiary:hover {
  color: #fff;
}
    <a class="btn btn-tertiary" href="#">
  <span class="circle">
      <i class="arrow-right">
      </i>
  </span> Create profile
</a>

    I also uploaded into https://jsfiddle.net/r4vfLhsw/

    Login or Signup to reply.
  3. 0

    Instead of changing the width, you can use scale for the button when hovered.

    .btn.btn-tertiary {
  position: relative;
  padding: 0;
  text-align: left;
  left: 70px;
  top: 20px;
  height: 50px;
}
.btn.btn-tertiary .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  z-index: -1;
  width: 3em;
  height: 3em;
  background: #1d99ae;
  border-radius: 2em;
  left: -60px;
  top: -10px;
}
.btn.btn-tertiary .arrow-right {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 14em;
  left: 0.625em;
  margin: auto;
  width: 0.625em;
  height: 0.625em;
  border-top: 0.125em solid #fff;
  border-right: 0.125em solid #fff;
  transform: rotate(45deg);
}
.btn.btn-tertiary:hover .circle {
  /* width: 100% REMOVED */
  transform: scale(200%);
}
.btn.btn-tertiary:hover {
  color: #fff;
}
    <a class="btn btn-tertiary" href="#">
<span class="circle">
<i class="arrow-right">
</i>
</span>Create profile
</a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search