Press the button and watch as it fills up from the left to the right in a rounded

Looking for help with a button that has a unique hover effect:

Current HTML

<a href="#" class="button">Learn more</a>

Current CSS

body {
  background-color: #f6f6f6;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  text-decoration: none;
}

.button {
  font-size: 20px;
  color: black;
  background-color: white;
  padding: 20px;
  border-radius: 50px;
  display: inline-block;
  background-image: radial-gradient(circle at left, black 50%, black 50%);
  background-size: 0 100%;
  background-repeat: no-repeat;
  transition: 0.4s;
}

.button:hover {
  color: white;
  background-size: 100% 100% !important;
}

.button::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  -moz-border-radius: 7.5px;
  -webkit-border-radius: 7.5px;
  border-radius: 7.5px;
  background-color: white;
  border: 1px solid black;
  margin-right: 15px;
}

View this code on CodePen as well

Inspiration for the design is to have rounded corners on the right side like shown here: https://i.sstatic.net/hdolK.png

If you have any suggestions or ideas, please let me know. Thank you!

htmlcssbuttonhover

Answer №1

As stated in a different Stack Overflow query, it is not possible to directly apply border-radius to a background image. One alternative approach is to use a pseudo background element and wrap your text in a <span> for z-index adjustment, as demonstrated below.

body {
  background-color: #f6f6f6;
}

a {
  text-decoration: none;
  color: black;
}

a:hover,
a:focus {
  text-decoration: none;
}

.button {
  font-size: 20px;
  color: black;
  background-color: white;
  padding: 20px;
  border-radius: 50px;
  display: inline-block;
  transition: 0.4s;
}

.button:hover,
.button:focus {
  color: white;
}


/* New CSS */

.button {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.button:hover::after,
.button:focus::after {
  transform: translateX(0);
}

.button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  transform: translateX(-100%);
  z-index: 0;
  transition: 0.4s;
}

.button span {
  position: relative;
  z-index: 1;
}

.button span::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  -moz-border-radius: 7.5px;
  -webkit-border-radius: 7.5px;
  border-radius: 7.5px;
  background-color: white;
  border: 1px solid black;
  margin-right: 15px;
}
<a href="#" class="button"><span>Learn More</span></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

Having trouble getting the CSS footer from cssstickyfooter.com to function properly

I tried implementing some basic CSS from to create a sticky footer that remains at the bottom of the page regardless of content length. However, I am encountering a problem with the footer not behaving as expected. There are actually two issues with the f ...

cssfootersticky-footer

CSS "border-clip" splitting the border in half

I found a great CSS tutorial on how to style borders with images. The tutorial can be found here. The example result of following the tutorial looks like this: https://i.sstatic.net/pgJhM.png One interesting thing I learned from the tutorial is using back ...

htmlcss

How to align a div with a background in CSS to the center

I'm attempting to center a text and an icon, but the icon is set within a background. How can I center the text and position the icon just to the left of the text? Here is the link to the fiddle with the code: jsfiddle <div class="error divErro ...

htmlcsscss-float

Steps for utilizing the Bootstrap filter to search for a specific name starting with a particular letter

I have implemented a bootstrap filter for searching, but I am encountering an issue. Currently, when I type 'n', it displays all names containing 'n' like Nathan and Arjan. However, I would like it to only show names that start with &ap ...

javascripthtmlcssbootstrap-4

Using JavaScript's `GetElementByName` method within a C# HtmlDocument

Currently, I am in the process of developing a web automation tool that is designed to streamline the completion of extensive online forms using predefined data. As part of this project, the tool will also notify users of the results once the forms have ...

c#htmlgetelementbyidgetelementsbytagnamewebautomation

Ensure that JavaScript finishes the animation before transitioning to the next step

Currently, I am developing a basic rotator that cycles through three pieces of advice on a website. My goal is to create a smooth fade in and out effect by adding and removing classes. While testing in the JavaScript debugger, everything runs smoothly as i ...

javascriptcsscss-transitions

Event triggered before opening the cell editor in ag-Grid

I'm facing a scenario where I have a grid with rows. When a user double clicks on a cell, a cell editor opens up. There are events associated with the cellEditor - cellEditingStarted and cellEditingStopped, but I need an event that triggers just befor ...

htmlcssangularag-gridtablecelleditor

Position CSS triangles for active hyperlinks

I'm having trouble creating a triangle for hover-over links, as the triangle always shows up in one corner instead of below the links. Can anyone help me pinpoint the exact issue? Fiddle #navcontainer a:hover::after { background: white; ...

htmlcsshtml-lists

You are unable to move the image to the top of the screen after zooming it with CSS

I implemented an image viewer component with interactive buttons for rotating, zooming in, and zooming out. Upon clicking a button, CSS transform is applied to the image. However, I encountered an issue where, when zooming the image, it cannot be scrolled ...

javascriptcss

Exploring the functionality of trading-vue library in a simple setup using vanilla HTML and Vue CDN

<html> <head> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a0c0f1f3a48544c544b48">[email protected]</a>/dist/vue.js"></script> ...

javascripthtmlvue.jsvuejs2vue-component

Display the assigned image when hovering over each item in the list

I am currently working on a project to showcase a list of names along with their corresponding images. To achieve this, I have set up a service that includes all the names and associated images: import { Case } from './case'; export const CASE ...

htmlcssangulartypescript

Having trouble setting up a page layout with CSS grid or grid-template-areas

Hey everyone, I'm a beginner in the world of HTML, CSS, and JS and this is my first time reaching out for help. I've been searching through various forums and spending quite some time on this particular issue, but unfortunately, I haven't fo ...

htmlcsscss-grid

A neutral-toned backdrop that briefly shows up for a quick 7-second interlude during a background-image

Recently I created a website. On this website, there is a feature where 3 images change every 7 seconds for a total of 3 cycles. The code snippet used for this functionality is as follows: var swap; function run(interval, frames) { var int = 1; ...

javascriptjqueryhtmlcss

There seems to be an issue with the border displaying correctly within the div element

I am currently working on developing a tag input system, but I am encountering some CSS issues. What I am aiming for is to have a green border that surrounds and contains the 2 divs inside it, however, this is not happening as expected. You can see the fi ...

javascripthtmlcss

Building Nested Div Tags

I'm struggling with creating nested divs similar to the layout shown in the linked image. Image Could someone please assist me in achieving this? .demo-container { padding: 30px; border: 1px solid #e2e4e7; background-color: #f5f ...

asp.nethtmlcss

Is there a way to ensure uniform font display across all browsers?

Is there a way to ensure consistent font display across all browsers? I am facing an issue with font consistency on my webpage. While browsers like Internet Explorer Edge and 11, Chrome, and Firefox display the desired font correctly, Internet Explorer 8 ...

htmlcssinternet-explorerfonts

I desire to incorporate a subtle fading effect into the script

I have written the script code and now I am looking to add a fade effect to it. Can anyone guide me on how to achieve this? Your help is much appreciated! ※I used an online translator as English is not my native language. Please bear with any awkward ph ...

javascripthtmljquerycss

Design elements for React and Angular JS

Is there a way to design UI components in a style that is compatible with both Angular JS and React? These two technologies will be utilized simultaneously within the same application. ...

cssangularjsuser-interfacereactjs

Transforming button colors using onclick events

I am currently working on creating a Grid that consists of 100 buttons and a customized color selector. The goal is to have each button change its background color to the selected color when clicked. However, I am facing a challenge with the following: Ma ...

androidbuttongridviewonclickbaseadapter