Is the button not aligned properly with the email input field?

<div class="subscribe__form--action--btn">
                        <form action="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32545b5e5b5746545C5B5356477F54585850"> </a>" method="post">
                            <div class="subscribe__action--active">
                            <input class="subscribe__input" type="email" id="emails" name="emails"
                                placeholder="Enter email">

                            <input type="button" class="subcribe__btn" name="subcribe__btn" value="Send">
                        </div>
                        </form>
                    </div>
            </section>

demo (with css): https://codepen.io/FilipoV/pen/LYWgeVm

htmlcssbutton

Answer №1

For consistent height regardless of padding, content, and border height, apply box-sizing: border-box;. To align elements in a row with no spacing, add display: flex to the parent div.

.subscribe__form--action--btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.subscribe__action--active {
  display: flex;
}

.subscribe__input {
  width: 280px;
  height: 60px;
  border-radius: 2rem 0 0 2rem;
  text-align: center;
  border: none;
  background-color: #000;
  box-sizing: border-box;
}

.subcribe__btn {
  width: 140px;
  height: 60px;
  border-radius: 0 2rem 2rem 0;
  font-size: 1.2em;
  border: none;
  margin-left: -4px;
  transition: 0.2s;
  background-color: #29bb89;
  box-sizing: border-box;
}
<div class="subscribe__form--action--btn">
  <form action="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4c8cbd6c1c9e4c8cbd6c1c98ac7cbc9">[email protected]</a>" method="post">
    <div class="subscribe__action--active">
      <input class="subscribe__input" type="email" id="emails" name="emails" placeholder="Enter your email">

      <input type="button" class="subcribe__btn" name="subcribe__btn" value="Submit">
    </div>
  </form>
</div>
</section>

Answer №2

Include the following css reset:

* {
  box-sizing: border-box;
}

Transfer flex to subscribe__action--active:

.subscribe__action--active{
   display: flex;
    justify-content: center;
    align-items: centre;  
}

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 the most efficient way to define the font properties for all H1-H6 headings in a single declaration

Is there a way to set all font properties for H1-H6 headings in one CSS declaration? CSSLint.net is flagging multiple definitions of heading styles as an issue. I currently have specific styles for each heading level: h1 { font-size: 1.8em; margin-top: ...

csshtmlxhtml

Creating an array of multiple divs based on numerical input

I am working on a project to show multiple divs based on the user's input number. For example, if the user selects 3, then 3 divs should be displayed. While I have successfully implemented this functionality, I need to dynamically assign IDs to each ...

javascriptjqueryhtml

I am having trouble displaying SASS styles in the browser after running webpack with node

In my current project for an online course, I am utilizing sass to style everything. The compilation process completes successfully without any errors, but unfortunately, the browser does not display any of the styles. The styles folder contains five file ...

javascriptcsswebpacksass

How can I update the color of table rows after the ng-repeat has been implemented?

My current project involves Django, Python, and a bit of AngularJS. I have a dynamic history table that grows as data is added. I am looking to apply some simple CSS to this table - specifically, I want to give every even-numbered row a black background ...

javascriptpythoncssangularjsdjango

Unselecting a span in AngularJS: Switching selection to another span

Whenever I click on an item from my list displayed using ngrepeat, it generates another list specific to the selected element. My goal is to change the background color of the clicked element to indicate it has been selected. However, the problem arises wh ...

javascripthtmlcssangularjs

Tips for sending a selected option value to jQuery via AJAX using the name attribute

Is there a way to send the section option value using ajax, but only for selection and checkboxes? The issue I'm facing is that when posting, the section and checkbox appear as undefined. Thanks in advance. PHP Code <?php $parameters = new P ...

phpjqueryhtmlajax

Tables that adapt to different screen sizes, displaying perfectly on desktop but with slight variations on mobile devices

I recently experimented with a demo to enhance the performance of tables on my website in development. The demo worked flawlessly on my desktop when I resized using a responsive tester extension for Chrome: https://i.stack.imgur.com/KzFiR.jpg However, u ...

htmlcssresponsive-designresponsive

Tips for utilizing flexbox and React-Native to ensure a cropped image takes up the entire View

I'm trying to create a cropped image that fills the entire screen in my app. Currently, my code looks like this: https://i.stack.imgur.com/9DtAc.png However, I want the small square of Homer eating donuts to occupy the entire screen, similar to the ...

javascriptcssreact-nativeflexboxreact-native-flexbox

Is there a way to apply an event function after adding elements through append?

When I click the button, a div is appended inside the body. However, I am trying to make it so that when I click on this newly appended div, an alert message pops up. I have tried implementing this with a highlighted area, but have been unsuccessful. How c ...

javascriptjqueryhtml

What is the best way to send information from an MVC controller to JavaScript?

Being new to programming, I am working on 2 projects that function as client-server via Rest API. I am looking to create a column chart using data from a List of ID (participant) and Votes (Total votes) obtained from the server's connection with the d ...

javascripthtmljqueryasp.net-mvcasp.net-core

Is there a way to determine the length of a variable containing a mixture of characters in HTML and PHP?

Let's say someone wants their username to be GreenApples-72. How can you determine the number of letters, numbers, and symbols in the username and add them together? if((($_POST['username'])<'2')) // Checking if the length of t ...

phphtmlvariables

Display additional information upon hovering without disrupting the neighboring elements

When I hover over a component, I want to display more details and scale it up. However, this action ends up displacing the surrounding components. Take a look at the screenshot for reference: Below is the code snippet where I defined the styling for an MU ...

cssreactjsnext.jsmaterial-ui

Next.js is causing me some trouble by adding an unnecessary top margin in my index.js file

I started a new project using next.js by running the command: yarn create next-app However, I noticed that all heading and paragraph tags in my code have default top margins in next.js. index.js import React, { Component } from "react"; import ...

javascriptcssreactjsnext.jsjsx

Steps for altering the color of an element when it hovers over a different element

I'm curious if it's possible to achieve something similar using CSS and how can I do it? HTML: <h2 id="hi">Hello!!! :) </h2> <h3 id="bye">Bye!! :( </h3> CSS: #hi:hover { #bye { color: green; } } ...

htmlcss

Guidelines for calculating the CRC of binary data using JQuery, javascript, and HTML5

Can you please assist me with the following issue? Issue: I am currently reading file content using the HTML5 FileReaderAPI's ReadAsArrayBuffer function. After storing this buffer in a variable, I now need to compute the CRC (Cyclic Redundancy Check) ...

javascriptjqueryhtml

Guide to automating the versioning of static assets (css, js, images) in a Java-based web application

To optimize the efficiency of browser cache usage for static files, I am seeking a way to always utilize cached content unless there has been a change in the file, in which case fetching the new content is necessary. My goal is to append an md5 hash of th ...

javajavascriptcssmavenjakarta-ee

Positioning a span to be below an input field

Below is the code for a Blazor component that includes a textbox which can be edited with the click of a button. @if (_editing) { <div class="floatingbox position-relative"> ...

cssbootstrap-4blazor-server-side

Conceal the HTML input element until the JavaScript has finished loading

Currently, I am using a JQuery plugin to style a form input with type 'file'. The plugin adds a new span over the input element to create a mask effect and encloses everything in a div. However, there is an issue where the standard HTML input box ...

javascripthtmlcssfile-io

Incorporating a pre-existing component into a Vue.JS template through an onclick event: How can this

I'm trying to enhance my template by implementing a feature that allows me to add a component simply by clicking on a button. Let me give you a glimpse of what I have in mind: The component named Draggable.vue is the one I intend to incorporate upon c ...

javascripthtmlvue.js

Tips for resolving the issue of "Text stays in original position while image changes in the background when hovering over the text."

I'm currently working on a website and I have a question regarding how to make text stay in position while hovering over it (inside a span), and at the same time, display an image in the background that allows the text to overlay it. HTML: <ht ...

htmlcssimagebackgroundhover