Designing a dynamic button that expands on hover to catch the eye

My instructor has provided us with this code snippet:

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

The task is to create a circular button with an arrow icon that expands over the text when hovered. It should be responsive to different screen sizes. Despite my best efforts, I am having trouble achieving the hover effect to take up 100% of the width within the container (refer to the fiddle).

https://jsfiddle.net/x1rnjgdL/

It's frustrating that I'm not allowed to edit the HTML code and the text cannot be placed in another span element with a class. This restriction is making the task quite challenging!

If anyone can provide assistance, it would be greatly appreciated. I have experimented with float, absolute or relative positioning, and grid layout, but I still can't achieve the desired hover effect to cover 100% of the container width. The goal is to make the button reusable in various placements with different text lengths.

htmlcss

Answer №1

Check out the revised CSS code below.

.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've also added it to https://jsfiddle.net/r4vfLhsw/

Answer №2

Opt for using the scale property rather than adjusting the width when hovering over the button.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Rearrange elements on a webpage using CSS and HTML to position one

Can we utilize CSS/HTML to visually move a full width element that is positioned below another one so that it appears above without altering the markup order? <div id="first">first</div> <div id="second">second</div> #first {…} ...

htmlcss

Storing the information received from an API as an HTML element

My HTML file contains JavaScript, along with a URL that displays data retrieved from an AWS lambda API call via AWS API Gateway. The page initially appears blank and the data is structured like this: [ {"user": "bob", "groups": ["bobsGroup"], "policies": ...

javascripthtmljsonaws-lambdaaws-api-gateway

Tips for creating a functional Submit button in HTML

How can I ensure that the submit button sends the necessary information to my email address when clicked (e.g. [email protected])? If PHP is required, please provide the code so I can easily integrate it into my project. Thank you! <div id="forms ...

phphtmlcss

The symbol "#" appears in my URL whenever the link is clicked

Seeking guidance on a URL issue that I am facing. Whenever I click the source link, it adds a pound sign to the URL. How can I prevent this from happening? Can someone assist me in identifying the necessary changes required in my jQuery or HTML code? Bel ...

javascriptjqueryhtml

When submitting a form with a contenteditable div and text box using JQuery, the POST request is not

I developed a website that allows users to edit and format text, then save it onto the server. Utilizing jquery to send the data to a PHP page for saving, I encountered an issue where the site fails to send the file name along with the formatted text to PH ...

javascriptphpjqueryhtmltext-editor

Is there a way to place two input fields from different forms side by side on the same line?

Here are two forms extracted from an html page: <form method="get" action="search/s" id="number"> <div style="text-align: center;"> <input type="text" id="regNo" name="regNo" size="30" maxLength="50" > or ...

javascripthtmlcssuser-interfaceweb

Firefox 3.5: The Notorious Code Copycat

Encountering an issue in Firefox 3.5.2 where after clicking a link on the page and then returning using the back button or another link, extra HTML code appears. Unsure if it's added by Firefox or related to PHP code. Unfortunately, unable to share t ...

phphtmlcssfirefox

Changing Images with Jquery on Click Event

This section of the HTML document contains an image link that is designed to switch between two images when clicked. The images in question are timeline-hand and hand-clicked. Clicking on the image should change it from one to the other and vice versa. Ho ...

javascriptjqueryhtml

Material-UI: Eliminating linkOperator functionality in data-grid

Is there a way to completely eliminate the linkOperator UI from the filter panel? I managed to move pagination to the top of the table using Material-UI, but can I achieve the same for the "Operators" menu programmatically? ".MuiDataGridFilterForm-linkOpe ...

cssreactjsmaterial-ui

Overlapping spans

I am trying to stack these spans on top of each other without much success, http://jsfiddle.net/76NNp/79/ <td class="rtf hov"> <div>Investment</div> <div class="mub eub"> <span style="float:left">Test</spa ...

jqueryhtmlcss

Obtaining search engine results from a webpage without using an API

In my attempts, I tried the following: $url = “http://www.howtogeek.com”; $str = file_get_contents($url); However, this code displays the entire website instead of the content from the URL specified in $url. The website I want to retrieve data from ...

phphtmlsearch-engine

Guide on creating 2 select inputs with distinct elements?

Imagine you have two select inputs called 'Favorite Fruits' and 'Least Favorite Fruits'. Both of them contain a list of 5 fruits. // The following code is an example to demonstrate the issue <select name='favoriteFruits'& ...

javascriptreactjshtmlreact-select

Steps for removing all inline styles within an element:1. Access the element's

I have a group of span elements containing texts generated by tinymce. <span class="ArticleSummary"> This content is produced using a text editor and may include various inline styles. </span> Typically, this text includes numerous inline s ...

javascripthtmlcss

Using AJAX to upload an image and passing multiple parameters

I'm facing an issue when trying to upload an image along with other input text in a form and send it to ajax_php_file.php. Whenever I upload the image, all my input text fields appear empty. Any assistance would be greatly appreciated. Thank you very ...

javascriptphpjqueryhtmlajax

Is there a way to incorporate a smooth fade effect on image transitions triggered by scrolling?

As I reach the bottom and scroll down, my images start to change dynamically, which is pretty cool! However, I would like to enhance this experience by adding a fade effect to the image transitions. You can view a demo of what I'm referring to here: ...

jquerycss

Display a loading image as a placeholder while the Block is loading on the Viewport

Despite my extensive search for a solution to my problem, I have been unable to find one that addresses it directly. I am trying to display a "loading" image for 4 seconds before the content of the div is loaded. Unfortunately, I haven't been able to ...

javascriptjqueryhtmlviewport

Is the maxlength attribute malfunctioning in Chrome and Safari for HTML forms?

<input type="number" maxlength="5" class="search-form-input" name="techforge_apartmentbundle_searchformtype[radius]" id="techforge_apartmentbundle_searchformtype_radius"> I found this HTML snippet using the Firebug tool in Chrome. In Chrome and Saf ...

html

Steps to Activate a Hyperlink for Opening a Modal Dialogue Box and Allowing it to Open in a New Tab Simultaneously

I am currently working on a website project. Within the website, there is a hyperlink labeled "View Page". The intention is for this link to open the linked page in a modal dialog upon being clicked. Below is the code snippet that I have used to achieve t ...

javascriptjqueryhtmlweb-applications

What is the best way to incorporate a <c:forEach> loop into JSP operations?

I am attempting to calculate the product of two variables that are associated with an item in a loop. Below is the code snippet from the JSP file: <table> <thead> <tr> <th>PRICE</th> <th ...

javascripthtmljspjstl

jQuery does not provide the reference of a basic canvas element

I'm having trouble with a simple initialization function that is supposed to create a canvas element in the body and save its reference in a variable. No matter what I try, jQuery doesn't seem to want to return the reference. I attempted refere ...

javascriptjqueryhtml