Changing the design of an animated button from CSS to styled-components

As I was searching the internet for a button style to use on my register form's button, I came across this awesome animated button code in simple HTML & CSS. I attempted to convert it to styled-components, but I couldn't quite get it to match the original design on CodePen. Can someone help me correct my code to replicate the original look?

HTML :

<div class="wrapper">
  <a href="#"><span>Hover Me!</span></a>
</div>

CSS :

.wrapper{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

a{
  display: block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  font-family: sans-serif;
  text-decoration: none;
  color: #333;
  border: 2px solid #333;
  letter-spacing: 2px;
  text-align: center;
  position: relative;
  transition: all .35s;
}

a span{
  position: relative;
  z-index: 2;
}

a:after{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #ff003b;
  transition: all .35s;
}

a:hover{
  color: #fff;
}

a:hover:after{
  width: 100%;
}

My try JSX :

const Button = styled.button`
  display: block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  font-family: sans-serif;
  text-decoration: none;
  color: #333;
  border: 2px solid teal;
  letter-spacing: 2px;
  text-align: center;
  position: relative;
  transition: all 0.35s;
`;
const Span = styled.span`
  &:after {
    position: absolute;
    content: "CREATE";
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: teal;
    transition: all 0.35s;
    cursor: pointer;
  }
  &:hover {
    color: white;
  }
  &:hover:after {
    width: 100%;
  }
`;

const Register = () => {
  return (
    <div>
        <Button>
            <Span>CREATE</Span>
        </Button>
    </div>
  );
};
export default Register;

Answer №1

make sure to apply the CSS selectors &:after, &:hover, and &:hover:after to the span instead of the button.

consider the following code snippet:

const Button = styled.button`
  display: block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  font-family: sans-serif;
  text-decoration: none;
  color: #333;
  border: 2px solid teal;
  letter-spacing: 2px;
  text-align: center;
  position: relative;
  transition: all 0.35s;
  &:after {
    position: absolute;
    content: "CREATE";
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: teal;
    transition: all 0.35s;
    cursor: pointer;
  }
  &:hover {
    color: white;
  }
  &:hover:after {
    width: 100%;
  }
`;
const Span = styled.span`
  position: relative;
  z-index: 2;
`;

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

The Google reCaptcha reply was "Uncaught (in promise) null"

When using reCaptcha v2, I encountered an issue in the developer console showing Uncaught (in promise) null message regardless of moving the .reset() function. Here is the console output: https://i.stack.imgur.com/l24dC.png This is my code for reCaptcha ...

What could be causing my CSS dropdown menu to not display properly?

I'm having trouble getting the dropdown to work when hovering over the li element with "portfolio" in the text. The code seems correct, but nothing happens when I try to hover over "Portfolio." Below is the code snippet: #navmenu ul { position: ...

What is the process for populating dropdown options from state?

I've been struggling to populate a select element with options based on an array in state. Despite trying various methods, the code snippet below seems to be the most detailed (I'm still getting familiar with React after taking a break for a few ...

What could be the reason behind the frequent occurrence of the "ECONNRESET" error in React?

While attempting to create a React app using 'npx create-react-app my-app', I encountered an npm ECONNRESET error. Being new to ReactJS, I am unsure of how to resolve this issue and would appreciate any assistance provided. I have decided to seek ...

Enhance your website by adding a personalized touch with unique hover

<html> <body> <a href="test.html" style="{color: blue; background: white} :visited {color: red} :hover {background: red} :visited:hover {color: red}"> Test </a> </body> </html> What i ...

Adaptable HTML design with alignment features

Here is the structure I am working with: <style> #main { max-width: 500px; margin: 0 auto; overflow: hidden; border: 1px solid red; } #container{ margin-right: -50px; } .block{ display: inline-block; width: 100px; height: 100px; border: 1px solid gr ...

Textfield removal from the input range is requested

I recently encountered an issue with my input range HTML code. Here is the initial code snippet: <input class="sliderNoTextbox" id="ti_monatlich" type="range" name="ti_monatlich" data-theme="d"> After some adjustments based on this helpful answer, ...

Each block in Svelte includes a unique shorthand attribute

I have a JSON variable that holds attributes in a specific structure: // This json variable defines the attributes for elements to be created let myElements = [ { attr1: "myAttr1", attr2: "myAttr2", }, { ...

What is causing the breakdown in communication between my server and client?

While utilizing React and an Express server for the backend, I am facing an issue where my API call to server.js is not going through. The React client is running on port 3001 and the server on port 3002. The fetch code in CreateAccount.js is as follows: ...

Experiencing slow loading times with a Next.js app in the development environment

Currently, I am in the process of building a Next.js application and I have noticed that it takes quite a long time to load in the development environment. At the start, the page becomes unresponsive and if I cancel the request, it stops loading altogeth ...

Firestore query is not displaying the expected data, resulting in an empty array being returned

I've encountered an issue where my query is returning an empty array. Despite double-checking for errors and typos in the query, no error messages are popping up. This problem arose while working on a learning project inspired by Firehip's NextJS ...

Angular input range slider that automatically rounds decimal values from the data bindings

I've implemented a range slider within an Angular form to capture and display recorded values. <input [formControlName]="object.id" [id]="object.id" type="range" [(ngModel)]="object.answer" [step]="objec ...

Ways to increase the spacing between several menus

Need help with spacing between menus Tried using margin left and margin right but it's not working File: _Layout.cshtml <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport&quo ...

Encountering a "404 not found" error upon refreshing a nested route page due to Vite failing to redirect all routes to index.html

Utilizing React Router's useNavigate hook allows me to navigate to a nested route such as localhost:3000/nested/route, but upon reloading the page, I encounter a 404 not found error. This occurs because the browser is looking for localhost:3000/nested ...

Navigating with hashtags in Angular2 and anchors does not change the page position

I recently came across a helpful post that showed me how to append a fragment to the URL. Angular2 Routing with Hashtag to page anchor Although the fragment is successfully added, I'm encountering an issue where the page does not scroll to the speci ...

How can I wrap content with the <li> element in a cross-browser compatible way?

I am encountering an issue with the dropdown menu on my website located at . When hovering over elements with a dropdown menu, you may notice that some of the items within the dropdown span more than one line and have varying widths. My goal is to adjust ...

Using jQuery to dynamically disable a textbox when a checkbox is checked

I'm trying to implement a functionality where a textbox becomes disabled and changes its background color when a user unchecks a checkbox. Conversely, if the user checks the checkbox, the textbox should become editable and change its background color ...

The style property webkitAppearance is not supported by this vendor. Perhaps you meant to use WebkitAppearance instead?

Today marks the beginning of a new journey with a different machine. Yesterday, I confidently pushed all changes and everything ran smoothly. Suddenly, as I settle down to work on my project today, an avalanche of errors floods my screen. While I will ign ...

What methods are available to create distinctive, shareable links akin to those utilized by Zoom and Google Hangouts?

I'm currently developing a group video chat app and I'm facing the challenge of generating distinct shareable links for every chat room created. Can anyone guide me on how to accomplish this? My aim is for users to easily join the chat room when ...

Update the object status from being null to a different one using the set state function

class SubCategoriesComponent extends React.Component< SubCategoryStateProps > { constructor(props: RouteComponentProps<CategoryUrlParams>) { super(props); this.state = { category: null, }; } componentDidMount() { ...