Design a vibrant call-to-action button that enlarges with a mouse hover

I came across some cool buttons on this site

Here is the code I found:

@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;
 -webkit-transform: translateX(236px);
}
.btn:hover {
 -webkit-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;
}

I attempted to recreate these buttons in my CSS file, but encountered issues with the positioning and layout. Here is how I tried implementing it:

<a href="#" class="btn"><button>register</button></a>

It seems like there might be a simple mistake I'm missing, as I am new to CSS. Any help would be appreciated.

htmlcssbutton

Answer №1

The problem isn't completely clear to me and I haven't applied all of your styles, but here is the basic concept:

  <div class="container">
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
  </div>


.container {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.container > div {
  background : blue;
  padding: .5rem;
  margin-bottom: 10px;
  transform: translateX(50%);
  transition: transform 0.3s ease-out;
}

.container > div:hover {
  transform: translate(0%);
}

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

What is causing the continuous appearance of null in the console log?

As part of my JavaScript code, I am creating an input element that will be inserted into a div with the id "scripts" in the HTML. Initially, I add a value to this input field using JavaScript, and later I try to retrieve this value in another JavaScript fu ...

javascriptjqueryhtmljsonfunction

Begin and terminate grid columns without indicating a specific starting or ending point

In my CSS project, I am working with a class named .col3 which serves as a grid item within a div carrying the class of .container. The parent container has the property grid-template-columns: 25% 25% 25% 25%, defining its layout. I would like the .col3 ...

htmlcsscss-grid

ng-bootstrap's accordion imparts unique style to its child icons

https://i.sstatic.net/YzmtN.png Visible star icon indicates lack of focus on the accordion https://i.sstatic.net/aNW31.png Star disappears when accordion gains focus Below is the CSS code I used to position the star to the left of the accordion: .icon ...

javascriptcssangularangular-ui-bootstrapng-bootstrap

How to dynamically assign width to elements in a v-for loop in Vue.JS

I am working with HTML code that looks like this: <div v-for="(s, k) in statistics" v-bind:key="s.id" class="single-stat"> <div class="stats"> { ...

cssvue.jsstyleswidth

What methods can be used to crop and style images in a similar manner using html and css?

Is there a way to replicate this specific method? I attempted to achieve the same look by using CSS masking, but the results weren't pleasing. Does anyone have suggestions on how to accomplish this using HTML/CSS? ...

htmlcssimagestylesheet

Using either the <h1> or <p> tag within my <div> element disrupts the entire layout

Whenever I add a heading tag or paragraph tag within my div, it causes the content to drop down the screen significantly. I am unsure of the cause and feel a bit overwhelmed by it. I attempted to wrap the <h1> tag in a <div>, as shown below: & ...

htmlcss

Choose an image from the gallery, assign a class to it, and then store it in the database

I am looking to implement a feature where users can select an image from a collection of images by clicking on a check mark. Once selected, the image should have a green checkbox indicating it is chosen, and then the ID or name of the selected image should ...

javascriptphpjqueryhtml

Using AJAX to dynamically update a DIV when there are changes in the XML data

After dedicating the past four years to solving this problem intermittently, my brain is feeling the strain. I serve as a volunteer designer for a local community project involving a radio station. Our "On Air" module showcases the current and upcoming tr ...

javascriptjqueryhtmlajax

Choose the ngModel option from the dropdown menu

I have a project where I need the first question from a list to be displayed automatically. I found an example of how to do this using the index, like so: <select> <option *ngFor="let answer of answers; let i = index" [value]="answer.id" [selec ...

javascripthtmlangularangular-ngmodelangular2-ngmodel

Text input field with uneditable text displayed at the end

Click here to view the input field I am looking to create an input field that always displays a "%" at the end of the input. Here is what my react component looks like currently: <StyledBaseInput type="text" ...

javascriptcssreactjsinput

Attempting to insert a dynamic variable into a jQuery click event selector

I'm facing an issue where I am attempting to use a variable as a selector within a click event for a dynamically generated row in a table. When I manually enter the class name, the row click event works perfectly. However, when I try to use the variab ...

javascriptjqueryhtmlvariablesselector

There is a lack of CSS import in the HTML document

I have organized my files in the following structure: - index.html - css/styles.css This is the HTML code I am using: <!DOCTYPE html> <html lang="en> <head> <title>Bootstrap Case</title> <meta charset="utf-8"> & ...

jqueryhtmlcsstwitter-bootstrap

Styling with CSS

What is the preferred method of CSS styling in the industry? Option 1: Create classes for each attribute (similar to bootstrap) and then attach the classes in HTML. For example: HTML: <p class="text-white text-bold"> John Doe </p> CSS: .te ...

htmlcss

Instructions on creating a vertical height adjustment handle for a website

Is there a way to create a 100% height div that can be divided by a draggable border vertically? Take a look at my fiddle to see what I have so far: http://jsfiddle.net/k5rtbzs5/ This is the HTML code: <div class="column"> <div class="top"> ...

javascriptjqueryhtmlcss

Cannot find CSS selector during web scraping operation

I recently started exploring web scraping and I'm currently working on extracting data from the following website: Specifically, I'm focused on extracting information from a particular table. However, the data in this table is not formatted in a ...

htmlcssrweb-scrapingrvest

The collapsed navbar button in Bootstrap is unresponsive

I run two websites. The Collapsed Navbar functions properly on the first site, located at (Index Site). <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" ...

htmltwitter-bootstrap

Show MaterialUI Dialog in fullscreen mode

I'm just starting out with React and Material-UI, and I'm trying to figure out how to print my current dialog. The issue I'm running into is that I can't seem to find a way to set the Dialog to full screen for printing while keeping it ...

cssreactjsmaterial-uireact-tsx

Is it possible to switch the background image when hovering?

Is the image proportion relevant to the issue at hand? <style> .img1:hover { background-image: url({%static 'images/img2.gif' %}); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; backg ...

javascripthtmlcsshover

Just a snippet of a webpage shown

My website focuses on online magazines. I'm looking for a way to selectively display specific parts of articles that are in regular HTML format with a global CSS stylesheet applied. There are no images, only text. How can I extract certain segments of ...

htmlcssiframe

Creating HTML dynamically upon page load with the use of JavaScript

I have a project where I need to create a small block of JavaScript that can be embedded in various websites' home pages. This script will automatically call a URL when visitors hit the home page, collecting specific statistics and returning a small i ...

javascripthtml