"Expanding Your Design: Manipulating Text Size and Padding with CSS

I am facing an issue with my buttons that are meant to look uniform.

One button contains the word "Register" and the other contains "Details". Due to this, the button with the longer word appears bigger, which is not desired!

My goal is to make both buttons look the same size even though the words have different lengths.

I have attempted to use padding to adjust the size, but using "width" did not produce the desired result.

Any assistance in resolving this matter would be greatly appreciated!

CSS:

.startLink {
  padding: 20px;
  padding-left: 90px;
  padding-right: 90px;
  color: white;
  background: #8d68dc;
  border-radius: 5px;
  font-size: 16px;
  box-shadow: 0px 5px 10px #000;
  webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  -o-transition: all 200ms ease-in;
  -ms-transition: all 200ms ease-in;
  transition: all 200ms ease-in;;
}

HTML:

<a href="index.php?register" class="startLink">Register</a>

<a href="index.php?details" class="startLink">Details</a>
htmlcss

Answer №1

width is the solution, but it seems that these links are currently inline elements and cannot have a specified width.

To solve this issue, you can set their display property to either inline-block or block, which will allow you to use width.

If you want the links to have the same width, choose a width that comfortably fits both elements. To center the buttons within a paragraph with equal widths, you can follow this example:

HTML

<p id='btns'>
    <a href="index.php?anmal" class="startLink">Anmäl</a>
    <a href="index.php?info" class="startLink">Information</a>
</p>

CSS

#btns { text-align: center; }
.startLink {
    display: inline-block;
    margin: 0 .65rem;
    background: red;
    padding: 1em;
    min-width: 200px;
}

Using min-width instead of width is recommended so that if the button text is longer than the specified width (for instance when coming from a dynamic source), the button will expand accordingly. This may result in buttons of different widths, but it ensures proper accommodation of varying content lengths.

Answer №2

For a cleaner design, consider using "text-align: center" instead of applying left and right padding along with setting a "min-width" and using "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

using http to handle a 404 error

This specific function is designed to fetch data under normal circumstances and to return a value of 0 in the event of a 404 error. function retrieveData(url) { if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); ...

javascripthtmlajaxget

What are some ways to improve the performance of my CSS and HTML webpage?

I have been diligently working on an HTML/CSS website to enhance my skills, but I am feeling uncertain about the excessive use of floats and sizes in my design. I also find myself in need of assistance with some CSS elements. Here's what I have: Wha ...

htmlcsshttpweb

What is the best way to categorize items in Angular lists based on their type

Lately, I've been delving into Angular and I'm facing a challenge - I want to split a list into two based on their type and display them in separate fields. My main query is: can I achieve this by using a for loop in the .ts file, or is there a s ...

htmlangulartypescript

Ways to avoid scrolling on a fixed element

Here is the HTML setup I have... body .top .content The issue I am facing is that when scrolling reaches the end of the ul in the .top element, the background starts to scroll. This can be quite disorienting and makes the site slow on tablets. Even ...

javascriptjqueryhtmlcss

How can Protractor find elements using non-HTML custom attributes?

When running e2e tests on my Angular project using Selenium WebDriver and Protractor, I encountered an issue with locating elements that have custom attributes. For example, I have an element like: <div my-directive my-unique-id="abc123"></div> ...

javascripthtmlangularjsseleniumprotractor

Dealing with HTML fields that share the same name in various positions can be tricky

Currently, I have developed a non-commercial web application using basic HTML, PHP, and Javascript along with Dynamic Drive's Tab Content code. This app serves as a tool for managing the books in my home library as well as on my ereader. My main goal ...

javascriptphphtmlajax

"Using a combination of Php, Html5, and xampp for

While attempting to run this PHP file using XAMPP, I encountered an issue. I am working on updating data in a database through a form submission. However, when I input the information and click submit, the page either just reloads or displays a message s ...

phpsqlhtmlxampp

Creating a dynamic select box that changes based on data in Angular

There is a select box on my page that is populated using ng-repeat with data from an array. The array includes first names, last names, and user names. By default, I want the select box to display the first and last names. However, if these fields are empt ...

htmlangularjs

How to customize the active color of the navigation pills in Bootstrap 4

I want to customize the background color of each pill, but I also want a faded version of that custom color with an active color matching the full color of the corresponding pill. pill one > faded red pill two > faded blue pill three > faded bla ...

cssbootstrap-4

The implementation of subnavbars within a navigation bar using HTML and CSS

I am looking to align the Login button with the settings icon on the same line above the links in my navbar. Is there a way to accomplish this? Check out this fiddle that demonstrates my issue: FIDDLE Here is the code I have written: <body> < ...

htmlcss

The styled-components seem to be having trouble injecting the necessary CSS to handle all the various props

I am curious to understand the potential reasons for styled-components not injecting all the necessary CSS into a page's header. In an existing project, I have defined a simple button like this: const Button = styled.button` background-color: ...

javascriptcssreactjswebpackstyled-components

Creating dynamic images in JavaScript by assigning URL paths from string variables

Currently, I am utilizing JavaScript to parse through an XML file. One interesting aspect of the XML is that it contains URLs which link to images like this one: http://localhost/pic.jpg Throughout the parsing process, I am storing each URL as a string va ...

javascripthtmlxml

Unicef's animated web content

Looking to learn more about gate animation and zoom page transition on the Unicef website? I want to incorporate these cool animations into my own project. Can someone provide me with a "keyword" or point me in the right direction to find information on ...

javascriptcsshtmlweb-animations

Do not make unnecessary calls to the server when changing the display property of an HTML object

How can I prevent a server request for the pdf file? I've experimented with using visibility=hidden and width=0. <object class='pdfClass' data='"+conventionId+"/showPdf.html' width='100%' height='600'>< ...

javascripthtmlpdfobject

How can you style the modal image to center it? Which <div> should you target for styling?

I'm facing an issue with my modal image within a Bootstrap 4 carousel that uses JQuery. When I open the modal, it doesn't appear centered on the screen. Could you advise me on which parent div to style and how? Additionally, how can I ensure the ...

jqueryhtmlcsstwitter-bootstrapcarousel

What is the reason the text does not have a border around it?

The border is supposed to be around the text, but it isn't showing up. Where did I go wrong? Could it be that I need to set a position? html { width: 100%; height: 100%; margin: 0; padding: 0; } body { width: 100%; height: 100%; marg ...

htmlcss

Unpredictable Fields Scraped with Python and Selenium

When I scrape data from a website, sometimes the milage is displayed and other times it shows MPG in vehicle descriptions. Below is the HTML code: I initially used xpath to go through the order as shown here: def init_driver(): options = webdrive ...

pythonhtmlseleniumxpath

Using Python and Selenium to retrieve information from the attribute 'data-label'

https://i.stack.imgur.com/zb7f5.jpg try: details = WebDriverWait(driver, 10).until( EC.presence_of_element_located((By.ID, "DataTables_Table_5")) ) scores_list = details.find_elements_by_tag_name('tbody') for sco ...

pythonhtmlseleniumwebdriver

When examining an element in an Angular application using Chrome Dev Tools, why do I not observe raw HTML code?

Just as the title suggests, my question is: Even if browsers don't understand Angular, why am I able to see Angular elements while inspecting the DOM despite using AOT (Ahead-Of-Time Compilation) which means there is no Angular compiler in the browse ...

javascripthtmlangulardomgoogle-chrome-devtools

How to Validate Comma-Separated Email IDs Using Regex in Angular 5 Template?

I am currently working on a project utilizing Angular 5. Within this project, there is an input field designated for E-Mail IDs. The main goal I aimed to achieve was: To enable the user to input a maximum of 3 E-Mail IDs, with each E-Mail ID being subject ...

regexangularhtmltypescriptangular5