CSS styling not appearing on HTML button

I'm attempting to create a login page similar to Instagram using HTML and CSS. However, I'm having trouble styling the button to match Instagram's login page.

The button 

<input type="submit" class="sub-btn">
The CSS :

.wrapper .header .form .sub-btn{
    margin: 10px 0;
    background-color: #3897f0;
    border: 1px solid #3897f0;
    border-radius: 4px;
    text-align: center;
    padding: 5px;
}

Despite applying this CSS style, it doesn't reflect properly on the HTML page. Any assistance would be appreciated.

htmlcss

Answer №1

try using

<Button class="sub-btn"></Button>

in place of

<input type="submit" class="sub-btn">

and make sure to check if .wrapper .header .form .sub-btn address is accurate or not

Answer №2

Choose either block or inline-block for the display property

display: inline-block;

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

Tips for retaining a chosen selection in a dropdown box using AngularJS

How can I store the selected color value from a dropdown box into the $scope.color variable? Index.html: <label class="item item-select" name="selectName"> <span class="input-label">Choose your favorite color:</span> <select id="colo ...

javascriptangularjshtmlselectionic-framework

How can two unique links toggle the visibility of divs with two specific IDs?

I am developing an interactive questionnaire that functions like a 'create your own adventure' story. The questions are shown or hidden depending on the user's responses. Below is the HTML code: <!-- TIER 3 ============================== ...

javascriptjqueryhtmlcss

Switch up the position of an element every time the page is refreshed

I have a webpage containing 5 images, each measuring 48px by 48px. I would like these images to be displayed in random positions on the page every time it is loaded. While I am aware that I will need to use CSS and JavaScript for this task (specifically f ...

phpjavascripthtmlcss

Angular JS Tab Application: A Unique Way to Organize

I am in the process of developing an AngularJS application that includes tabs and dynamic content corresponding to each tab. My goal is to retrieve the content from a JSON file structured as follows: [ { "title": "Hello", "text": "Hi, my name is ...

javascripthtmlangularjs

What is the best way to toggle the visibility of my menu using JavaScript?

I recently implemented a script to modify a CSS property in my nav bar as I scroll down, triggering the change after reaching 100px. $(window).scroll(function() { var scroll = $(window).scrollTop(); //console.log(scroll); if ...

javascripthtmlcss

Is there a way to determine if two distinct selectors are targeting the same element on a webpage?

Consider the webpage shown below <div id="something"> <div id="selected"> </div> </div> Within playwright, I am using two selectors as follows.. selectorA = "#something >> div >> nth=1&q ...

javascripthtmltypescriptdomplaywright

Ensuring the canvas fits perfectly within its parent div

I am attempting to adjust my canvas to fit inside a div. // Make the Canvas Responsive window.onload = function(){ wih = window.innerHeight; wiw = window.innerWidth; } window.onresize = function(){ wih = window.innerHeight; wiw = window.innerWidth; } // ...

javascripthtmlthree.jswindowparticles

What are the best ways to create a responsive login form?

After recently beginning to learn HTML and CSS, I have encountered some confusion. Take a look at this table design for screens under 500px, and then compare it to how it should appear on screens 500px or larger. I believe utilizing a media query may be t ...

htmlcssresponsive-design

Encountering issues with the display of JSON data in MVC

Question: How can I pass JSON data from my controller to the view and render it using JavaScript? [HttpGet] [AllowAnonymous] public ActionResult Index() { ServiceReference1.ipostep_vP001sap0003in_WCSX_comsapb1ivplatformruntime_INB_WS_C ...

javascripthtml.netasp.net-mvcasp.net-mvc-4

Instructions on removing an HTML element from a div that has the attribute contentEditable

Here is an example of HTML code: <div id="editable" contentEditable="true"> <span contentEditable="false">Text to remove</span> </div> I want to be able to delete the entire span element (along with its text) with just one bac ...

javascripthtmlfbjs

Embed the YouTube video using the URL in the video tag

I tried using the <video> tag, but I'm having trouble getting it to play videos from YouTube. Even though I found this http://jsfiddle.net/wCrNw/, it doesn't seem to work as expected. I also consulted Show Youtube video source into HTML5 ...

htmlvideoyoutube

JavaScript: Automatically retrieving the if else function

I need help automating the calculation of the number of days a person worked based on their "in-time" and "out-time". I've tried to implement this in my JS code, but it's not working as expected. HTML <fieldset> In-Time: <input clas ...

javascriptphphtml

Is there a way to insert a dot after every two digits in a text field using Javascript upon keypress?

When inputting a 4-digit number (e.g. 1234) in my text field with value format 00.00, I want it to automatically adjust to the 12.34 format. How can I achieve this behavior using JavaScript on keyup event? ...

javascriptjqueryhtmlcss

Is there a way to connect two tables using CSS pseudo-selectors?

Is there a way to make two separate tables interact with each other using CSS pseudo-selectors? I have a data table and an auto-numbered table, and I want the rows to highlight in both tables when hovering over a cell in one of them. I've tried using ...

javascripthtmlcssreactjscss-selectors

What methods can I use to stop Meta and Title tags from injecting when I import PHP files into an HTML document?

In my PHP document, I took out the Title and Meta tags from the header section, leaving it empty: <!doctype html> <html> <head> </head> <body> <?php require '/DBConnect.php'; //More code here that generates my ou ...

phphtmlinclude

Maintain the height of the image equal to the height of the

I've been facing challenges with adjusting the height of this image to match the div container. I've experimented with various height properties such as max-height, min-height, normal height, auto, and 100%, but none seem to be providing the desi ...

htmlcss

What is the process for using jQuery to systematically alter the src attribute of all avatar images on Twitter.com?

Summary: I am learning JavaScript and jQuery, and wanted to write a script to replace "_normal.png" with ".png" for all "img.avatar" images on Twitter.com. I encountered an error which I will explain below. Background: Practice makes perfect, so I like to ...

javascriptjqueryhtmlimage

Having issues with AngularJS where ng-table/ng-repeat rows are failing to load properly

I've been following a tutorial on using ng-Table, which can be found Here. When I download the example from Git, it loads without any issues. However, when I try to replicate even the simplest example myself, the column headers and filters load but th ...

javascripthtmlangularjsangularjs-ng-repeatngtable

How can we make the Facebook like button display the fan count as the counter?

Can the Facebook like button be customized to display the fan count as the counter, and also update the fan count when clicked (like/unlike)? I've searched through forums and tutorials but haven't found a solution yet. It appears that the standar ...

phphtmlfacebookfacebook-like

Uncovering website content with Selenium: unlocking the mysterious origins of the text

Currently, I am utilizing Selenium and Python to scrape a website. My goal is to extract specific text from a particular page. Despite successfully navigating to the desired page, every attempt at using methods such as driver.find_elements_by_id(), driver. ...

pythonhtmlseleniumweb-scraping