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>

https://i.sstatic.net/7ajLh.jpg

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

performing a GET request directly from a <script> element in the index.html file

I am currently developing an application that utilizes Angular.js on the client side and Node Express on the server side. On my server side, I am using a staticAsset module. Within my index.html file, I have a lengthy list of JavaScript files that need t ...

javascripthtmlnode.jsangularjsexpress

Using AngularJS ng-style to set dynamic background images for different variables

Excuse me if this is a basic question. I am working on designing a login page with a background image, while the other pages don't have this background. I tried using ng-style but couldn't get the style to update when navigating between pages. In ...

cssangularjs

Assigning the href attribute dynamically

How can you dynamically set the href attribute of the <a> tag using jQuery? In addition, what is the method for retrieving the value of the href attribute from the <a> tag with jQuery? ...

javascriptjqueryhtml

Resizing a damaged HTML table to fit within a designated width using CSS

Here is a challenge - I have some broken HTML that I can't touch, and don't want to use JavaScript to fix. My goal is to make it fit within a specific width: http://jsfiddle.net/P7A9m/2/ <div id="main"> <table> <tr> ...

htmlcsswidthhtml-table

Tips for implementing validation in JavaScript

I'm brand new to learning Javascript. Recently, I created a template for a login page and it's working perfectly fine. However, I am struggling with setting up validation and navigation. My goal is to redirect the user to another page if their us ...

javascripthtmlauthentication

Tips for sending parameters to XSLT using a Javascript function

Despite my efforts to find a solution in various online posts, I haven't been able to resolve the issue. The challenge lies in my HTML file that includes a JavaScript function for parsing XML and rendering XSLT. I have multiple 'records' in ...

javascripthtmlxmlxsltxml-parsing

Use jQuery to retrieve HTML content excluding comments

Take a look at the code snippet below. HTML: <div> <p>sdfsdfsfsf</p> <!--<p>testing</p>--> </div> JQUERY $(document).ready(function(){ alert($("div").html()); }); OUTPUT <p>sdfsdfsfsf</p> & ...

jqueryhtmlcss

Issue with submitting forms in modal using Bootstrap

In the model box below, I am using it for login. When I click on either button, the page just reloads itself. Upon checking in Firebug, I found something like this: localhost\index.php?submit=Login <div class="modal fade" id="loginModal" tabindex= ...

javascriptphpjqueryhtmltwitter-bootstrap

I designed an innovative contact form utilizing mail function, yet unfortunately, the emails generated from it persistently land in spam folders. Below is the code I

I have created a contact form using the mail function, but all the emails are ending up in the spam folder. Here is my code: <?php // CODE FOR SENDING EMAILS if(isset($_POST['submit'])){ $to = "<a href="/cdn-cgi/l/email-protectio ...

phphtmlcontact-form

Opera browser fails to render CSS3 box shadow effect

My menu features CSS3 effects on hover and active states, giving it a unique appearance. Below is the CSS3 styling I have implemented: #Menu a:active, #Menu a.active:before,#Menu a:hover:before { Content: ' '; position:absolute; z-i ...

cssopera

How to align scrolling images with their scroll origin - a step by step guide

Curious to know the name of the effect where images scroll in a different orientation than the page, creating a 2D appearance. Take a look at the Google Nexus website and scroll down - do you see the effect? What is this effect called? Is it created usin ...

javascriptjquerycssanimation

Transfer the information of a selected element to a different element

Hello, I am trying to transfer content from a child element to another element. In my HTML setup, there is a hidden div named "DetailsExpanded" and multiple items called "IconWrapper". When an "IconWrapper" is clicked, I want to copy the content of its "I ...

javascriptjqueryhtmlcss

What specific features does CSS3 offer in terms of background-size properties?

Let's delve into my knowledge: $, like in font-size: 14$; em, as in margin: 2em; What other units are out there? ...

css

Building Nested Divs with JavaScript

I've encountered an issue with this code snippet. While it works perfectly fine in jsfiddle, I faced a problem when testing it on my local file. Only the first three lines created by html are displayed: test h1 test h2 test p (I tested the code ...

javascripthtmlcross-browser

Can search engines understand and interpret CSS files?

Upon examining various CSS files across different websites, I've noticed comments similar to the one below: /* Theme Name: CSSnewbie V2 Theme URI: http://www.cssnewbie.com Description: Second version of CSSnewbie, based on Carrington theme by Crowd ...

cssseo

Methods of using jQuery to conceal table rows according to child class name

I need to filter out rows in a table that do not contain a specific class. For instance: <tr id="game-22590" class="game"> <td class="pos left-edge"> <div>2</div> </td> <td class="cost"> < ...

javascriptjqueryhtmlhtml-tableclassname

Looking to showcase this information using an HTML Ajax jquery call

{"response":{"refno":"hfc","status":"Status : Reference number does not exist."}} After sending a request to a specific webpage, I received a response in JSON format. I am looking for a way to display this response in HTML, either in a table format or a s ...

jqueryhtmlajax

I am looking for an image search API that supports JSONP so that users can easily search for images on my website

I am currently in the process of creating a blog platform. My goal is to allow users to input keywords on my site and search for images directly within the website. This way, I can easily retrieve the URL of the desired image. ...

javascriptjqueryhtmlcssjsonp

Using JavaScript to locate and emphasize specific words within a text, whether they are scattered or adjacent

I need help finding a JavaScript code for searching words in a text using a form and a search button. I found one that works for multiple words in a row, but it doesn't work if the words are mixed up. What changes should be made to fix this issue? An ...

javascriptstringbuttonsearch

The Feedback Form jQuery is not providing any data

I'm facing an issue with my html page that includes an ajax query to a php file. The purpose of this php file is to send a message and then return a response to the ajax query. However, no matter what I try, I am unable to receive any response from th ...

phpjqueryhtmlajaxphpmailer