Create multiple buttons with uniform width by adjusting padding in CSS

I recently attempted to create buttons using CSS and padding.

Here is the HTML code for the buttons:

<link rel="stylesheet" type="text/css" href="css/style-login.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.0.3.css" />

<div class="omb_login">
    <div class="omb_socialButtons">
        <button class="btnfb">
            <i class=" fa fa-facebook" data-size="icon" data-scope="public_profile,email" onlogin="checkLoginState();"></i>
                Login With Facebook
        </button>
        <button class="btngoogle">
            <i class="fa fa-google" data-size="icon"></i>
                <a href="<?php echo $google; ?>">
                    Login With Google
                </a>
        </button>
    </div>
</div>
...

After styling the buttons in style-login.css, I noticed that the width of the Facebook and Google buttons were not the same despite adjusting the padding. Is it possible to make the buttons the same width using only padding without specifying width or height?

As I am not very experienced with CSS, do you have any advice on how to achieve this alignment?

htmlcssbutton

Answer №1

Due to the varying text lengths, the two buttons will not appear identical unless their widths are set the same. This is logical, but you have the option to align the icons if desired.

To achieve this, the icons must be independent of the button text. You can use position:absolute on the icons and position them accordingly.

Refer to the snippet below:

.omb_login  {
text-align: center;
line-height: 300%;
color: white;
display: block;
}

.btnfb {
-moz-box-shadow:inset 0px 1px 0px 0px #88accb;
-webkit-box-shadow:inset 0px 1px 0px 0px #88accb;
box-shadow:inset 0px 1px 0px 0px #88accb;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4189c4', endColorstr='#3975a8',GradientType=0);
background-color:#4189c4;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #2e6697;
display:block;
cursor:pointer;
color:#ffffff;
font-family:Verdana;
font-size:14px;
font-weight:bold;
padding:10px 0;
width:300px;
text-decoration:none;
text-shadow:0px 0.1px 0px #FFFFFF;
position:relative;
}

.fa-facebook { 
position:absolute;
left:50px;
top:12px;
}

.btngoogle {
-moz-box-shadow:inset 0px 1px 0px 0px #F8A088;
-webkit-box-shadow:inset 0px 1px 0px 0px #F8A088;
box-shadow:inset 0px 1px 0px 0px #f8a088;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eb5d37', endColorstr='#dc5835',GradientType=0);
background-color:#eb5d37;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #bb4a2b;
display:block;
cursor:pointer;
color:#ffffff;
font-family:Verdana;
font-size:14px;
font-weight:bold;
padding:10px 0;
width:300px;
text-decoration:none;
text-shadow:0px 0.1px 0px #FFFFFF;
margin-top:10px;
position:relative;
}

.fa-google { 
position:absolute;
left:50px;
top:12px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="omb_login">
    <div class="omb_socialButtons">
        <button class="btnfb">
            <i class=" fa fa-facebook" data-size="icon" data-scope="public_profile,email" onlogin="checkLoginState();"></i>
                Login With Facebook
        </button>
        <button class="btngoogle">
            <i class="fa fa-google" data-size="icon"></i>
                <a href="<?php echo $google; ?>">
                    Login With Google
                </a>
        </button>
    </div>
</div>

Answer №2

A great way to achieve this is by incorporating display: inline-block, specifying the desired width for the target button, and then including your desired amount of padding.

Answer №3

<style>
button
{display:block;
min-width: 300px;}
</style>

<div>
<button> Login with facebook</button>
<button> Login with google+</button>
<button> ?</button>
</div>

Here is a snippet of code that demonstrates how to set a minimum width for buttons in your application. Each button, including one with a question mark, will have an equal width of 300px.

If the text inside a button exceeds the minimum width, the button will expand accordingly to accommodate the text.

To implement this style for Google and Facebook login buttons, add the following CSS classes:

.btngoogle {min-width:300px;}

.btnfb { min-width:300px; }

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

Should the letter 'p' be inserted into the letter 'a'?

After viewing a video on Bootstrap, I noticed an unusual occurrence where there was a p element nested inside an a element. Is this considered acceptable in terms of HTML semantics? ...

htmlsemantic-markup

HTML - implementing a login system without the use of PHP

While I am aware that the answer may lean towards being negative, I am currently in the process of developing a series of web pages for an IST assignment in Year 9. Unfortunately, the web page cannot be hosted and our assessor lacks the expertise to utiliz ...

javascriptphphtmlauthentication

Enter the UL element and modify the LI class if it contains the .has_children class

Seeking assistance in navigating through a UL element to modify the LI and nested UL classes when .has_children is detected. Take a look at this example: <ul class="nav navbar-nav"> <li class="first current parent">Link1</li> < ...

javascriptjqueryhtml

What could be the reason my black overlay doesn't show up when the button is clicked?

Attempting to craft a pop-up window on my own, I encountered an issue. Upon pressing the button, instead of the anticipated pop-up appearing and darkening the background below it, the entire page freezes with no sign of the pop-up box. If I eliminate the ...

javascriptjqueryhtmlcss

Passing JSON information from a website to a Node.js server

<script type="text/javascript" src="data.json"></script> var mydata = JSON.parse(data); data = '[{"yer" : "Besiktas", "lat" : "41.044161", "lng" : "29.001056"},{"yer" : "Eminönü", "lat" : "41.017513", "lng" : "28.970939"},{"yer" : "Zeyt ...

javascripthtmljsonnode.js

What is the best method for efficiently wrapping contents within a div container?

On the website cjshayward.com/index_new.html, there is a div wrapped around the content of the body, which is approximately 1000 pixels wide. In Chrome and Firefox, the wrapper works perfectly for the top section of about 100 pixels. Further down the page, ...

htmlcssjquery-uijquery-ui-tabsjquery-ui-accordion

I am facing difficulties accessing an element within a controller in Angular

Struggling to access an element inside an AngularJS controller, I attempted the following: var imageInput = document.getElementById("myImage"); Unfortunately, this approach was unsuccessful as the element returned null. Curiously, when placing the statem ...

javascripthtmlangularjs

Learn the effective way to style ul elements within @mui/material/Menu using CSS

When the button is clicked, I want to apply the following styles to the ul: &.MuiList-root { padding-top: 0px; padding-bottom: 0px; } View the issue in action on this live sandbox: https://codesandbox.io/s/react-typescript-forked-tyd8n8?fil ...

cssmaterial-ui

Arranging elements within distinct div containers

Utilizing Bootstrap 4, I crafted a card-deck containing two cards. Despite the equal height of both cards, the alignment of elements is affected by varying text lengths. <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min ...

htmlcsstwitter-bootstrapbootstrap-4

Creating responsive modal windows in Vue and Laravel to dynamically adjust to the screen size

I am currently working with a modal window code snippet. <transition name="modal" @close="showModal = false"> <div class="modal-mask" style=" width: 90% !important;"> <div class="modal-wrapper"> < ...

cssvue.jsmobilevue-component

Choose the div without a class

I currently have several divs displayed on my website. <div class="slide bx-clone"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide bx-clone"></div> <div class="slide bx-clone" ...

javascriptjqueryhtml

Continuously make Ajax requests to populate numerous div elements

There are two div elements present on my webpage. <div id="1"></div> <div id="2"></div> I am attempting to dynamically populate these divs using the following php call. <script> var queries = ["SELECT * from table1", "S ...

javascriptphpjqueryhtmlajax

What is the best way to style multiple classes within the same element (specifically an ordered list ol

Using CSS counters, I have created various styles for an ordered list <ol> by applying different classes and adjusting the styles accordingly. Now, I want the counters to adjust based on screen size, displaying smaller numbers on smaller screens. To ...

cssclasshtml-liststargeting

Is there a way to split each foreach value into distinct variables?

I am looking to assign different variables to foreach values. I have fetched data from an API in JSON format, and then echoed those values using a foreach loop. My goal is to display the echoed value in an input box using JavaScript. I attempted the follow ...

javascriptphphtml

Adjusting the URL variable based on the selected checkbox option

My mobile website offers users the option of a bright or dark interface using a checkbox styled like an iPhone IOS7 switch. The functionality is working as expected, but I'm now facing an issue with passing the status of the checkbox between pages. I ...

javascriptjqueryhtmltwitter-bootstrapcheckbox

In IE9, users can select background elements by clicking on specifically positioned links

Trying to turn an li element into a clickable link by overlaying it with an a element set to 100% height and width. While this solution works in Chrome and FF, IE9 is causing issues as other elements behind the link remain selectable, rendering the link un ...

cssinternet-explorer-9

Using JavaScript to implement CSS3 with multiple background images

Is there a way to programmatically define multiple background images in CSS3 using JavaScript? While the common approach would be: var element = document.createElement( 'div' ); element.style.backgroundImage = "url('a.png') 0 100%, ur ...

javascriptcssbackground

Send form data using ajax technology

When testing my code on localhost, everything runs smoothly. However, when I tried running it on the server, it doesn't seem to be functioning properly. $("#MyUploadForm").ajaxSubmit(options); I would greatly appreciate any assistance with t ...

htmlajax

Unusual Behavior in AngularJS: Using ng-include Triggers Full Page Reloading

An issue arises where a simple ng-include command causes the entire website to be printed recursively in a specific area of the page, ultimately crashing the browser. Even changing the path doesn't resolve the problem, suggesting that it's not ev ...

javascripthtmlangularjsangularjs-ng-include

What steps can I take to prevent my JavaScript code from interfering with my pre-established CSS styles?

I'm currently designing a mini-email platform that serves as a prototype rather than a fully functional application. The HTML file contains placeholder emails that have been styled to appear presentable. I've implemented an input bar and used Jav ...

javascripthtmlcss