The button seems to be jammed along the Y/vertical axis

After experimenting with the display and position style properties, I am struggling to move my element along the vertical axis. I borrowed CSS code from a button generator website and it works perfectly fine. Even added a JavaScript function to enhance its functionality but positioning remains a challenge for me.

#startButton {
    box-shadow: 0px 0px 12px 2px #3dc21b;
    background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
    background-color:#44c767;
    border-radius:28px;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Verdana;
    font-size:18px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
    position: relative;
    top: 50%;
    left: calc(50% - 30px);
}
.startButton:hover {
    background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
    background-color:#5cbf2a;
}
.startButton:active {
    position:relative;
    top:1px;
}

The element is standalone in HTML, not residing within its own div, head, or body. Not sure if this matters, though. Any assistance would be greatly appreciated as I navigate through self-teaching coding with a current focus on JavaScript, acknowledging the importance of CSS and HTML in web development.

Edit: Realized that elements do not simply overlap as I initially assumed. Discovered that the 'space' allocated for the button element extends below the canvas. Looking for solutions on how to effectively layer these elements.

cssbutton

Answer №1

The issue at hand is due to the lack of a fixed height in the parent element (body in this scenario).

To resolve this, you can create a new parent element with a specific height and wrap your #startButton inside it.

Update your HTML code as follows:

<div class="parent">
  <button id="startButton"> #Startbutton </button>
</div>

Assign a fixed height to the parent element (e.g. 300px):

.parent {
  height: 300px;
}

Check out the example on Fiddle: https://jsfiddle.net/kongallis/chqn18us/6/

You may also find more insights here: https://stackoverflow.com/questions/9765402/why-is-is-top50-in-css-not-working#:~:text=To%20answer%20your%20question%20why,a%20unit%20other%20than%20percent.

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

Problematic response design

On my responsive website, I am utilizing the hr tag in various places. However, I have noticed that some lines appear with different thicknesses, as shown in the example below. For a demonstration, you can view a sample on this fiddle: http://fiddle.jshel ...

htmlcssresponsive-design

Consistently sized and evenly proportioned, regardless of the amount of content within the card body

Is there a way to make these cards uniform in size and width? Whenever I add more text to a product on a card, the body shifts down while the edges of the card stay the same. I want the body to stay aligned regardless of the content. Is this possible? &l ...

htmlcssbootstrap-4

Is it possible to redirect the client to a different HTML file after they input a number?

Following a submission of numerical input, I am looking to navigate from the index.html file to another HTML file or similar destination. Could someone provide assistance? Below is the code I have written: <!DOCTYPE html> <html lang="en&quo ...

javascripthtmlcss

Do Bootstrap 3 and Bootstrap 4 - alpha versions maintain backward compatibility with each other at present?

Is backward compatibility maintained between Bootstrap 3 and the alpha version of Bootstrap 4? I am attempting to replace Bootstrap 3 with the new alpha version, but I am experiencing broken styles. Is this a common issue or am I missing something in my a ...

csstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Attempting to apply styling to a div by utilizing ng-repeat

I'm attempting to modify the background color of a div using ng-repeat. The color I want is retrieved from the object in the loop. However, every time I try to do this, it sets my style property to blank. Here's the code I have been using: ...

cssangularjs

Attempting to automatically change the selected input radio button every 3 seconds using HTML

Hey there, I'm just starting out with coding and StackOverflow. I'm attempting to create a basic slider but for some reason, the images are not changing. My goal is to cycle through checked input radio buttons every 3 seconds, but something seems ...

javascripthtmlcss

Two neighboring sections containing dynamic elements. One section automatically adjusts its size to fit the content, while the other allows

I need to display 2 adjacent boxes with dynamic content rendered using Angular. The Container should have the same height as Box1. The height of Box2 may vary due to its dynamic nature, but it should never be taller than Box1. If it does become higher, a s ...

htmlcssdynamicheight

Decrease the gap between the <hr> and <div> elements

I currently have multiple div tags with hr tags in between, resulting in automatic spacing. I am looking to decrease this space. Please view the image link provided below for reference. [I am aiming to minimize the gap indicated by the arrow] Additionally ...

htmlcsstextlinespace

Increment the counter value by one when a new class is created or appended

My goal is to develop a system that increments the 'fault' counter by one every time a wrong answer is submitted. To achieve this, I have configured my system to detect when a class named "incorrectResponse" is generated. However, I am encounteri ...

javascriptjqueryhtmlcss

The height of the Ionic Checkbox is unevenly proportioned

I'm currently using the code below to display checkboxes in a row: <label class="row item item-input "> <span class="item-text-wrap col col-50 input-label">Inspection Type</span> <d ...

htmlcssionic-framework

Customize images using React JS to add an overlay on top of an HTML img

I'm looking to achieve a similar effect to Facebook where hovering over an image tag triggers a little overlay asking if you want to edit the photo. I have the hover functionality working, but I'm unsure how to implement the overlay. The image is ...

htmlcssreactjs

Using JavaScript to link buttons and dynamically change their colors

Just starting to dabble in JavaScript and attempting to change the colors of my website's header, footer, and background. I've created two buttons: <div class="styleBut"> <a href="#" class="btn btn-warning">ReStyle</a> ...

javascriptjqueryhtmlcss

a step-by-step guide on refreshing your site's favicon with a touch of Vimeo

I'm intrigued by the dynamic favicon on Vimeo that displays a pie chart indicating the progress of video uploads. Can anyone provide guidance on how to develop something similar? ...

javascripthtmlcssvimeofavicon

Creating a Framed Image with Bootstrap 3 Style on iOS Devices

I am trying to achieve 3 image effects on iOS that are similar to Bootstrap effects: http://getbootstrap.com/css/#images So far, I have been successful in creating rounded corners and circles, but I am having trouble with the framed effect. The "img-thu ...

ioscsstwitter-bootstrapuiimage

Easily transform your CSS code into Mozilla-specific CSS with just a click of

Assuming I have the following CSS: border-bottom-right-radius: 20px; Is there a JavaScript library available to automatically convert it to -moz-border-radius-bottomright: 20px; when it detects a user agent that belongs to a Mozilla browser, like Firef ...

javascriptjquerycss

Leveraging CSS or JavaScript for Displaying or Concealing Vacant Content Sections

I'm working on developing a page template that utilizes section headers and dynamically pulled content from a separate database. The current setup of the page resembles the following structure: <tr> <td> <h3> ...

javascriptjqueryhtmlcss

Discover the process of incorporating secondary links into your dabeng organizational chart!

I need to incorporate dotted lines on this chart, such as connecting leaf level nodes with middle level nodes. import OrgChart from '../js/orgchart.min.js'; document.addEventListener('DOMContentLoaded', function () { Mock.mock(&apo ...

javascriptjquerycssorgchart

Preventing flex items from becoming overly tall in Firefox using flex-direction: column

Working with flex layout has presented a challenge in Firefox and IE11. I have set up a codepen to demonstrate the issue. Screenshot https://i.sstatic.net/i9KlS.png Chrome(left), Firefox(right) Description The intended behavior is for the header and f ...

cssflexbox

SVG to create a gradient mask that appears transparent

I require assistance with working on svg's. I have a "background image" with another "image" layered over it. The "image" needs to have a hole cut out of it so that the background image can shine through. I managed to achieve this by utilizing svg: ...

javascripthtmlcsssvg

What is the best way to apply margins to a nested div element in relation to its parent div element using CSS?

My Coding Dilemma: #b { width: 700px; height: 150px; margin-top: 10%; margin-left: 20%; text-align: center; border: 2px solid black; } .block { width : 10%; height : 10%; border: 2px solid black; padding: 40px 40px; margin: inheri ...

javascripthtmlcss