CSS: The button text appears to be aligned to the bottom of a line height that is seemingly larger than

There seems to be a strange issue with the way class styles are being applied to elements, causing them to render differently depending on whether they are applied to an anchor tag or a button.

The class 'btn' is defined below;

.btn {
    background:transparent;
    border:2px solid #FFF;
    padding: 18px 30px 18px;
    line-height:1.7em;
    max-width:100%;
    white-space:normal;
    margin-top:25px;
    border-radius:100px;
    text-transform: uppercase;
    letter-spacing:0.1em;
    font-weight:bold;
    color:#FFF;
    text-decoration:none;
    transition:all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }

When this class is applied to an anchor tag, it displays correctly;

https://i.sstatic.net/jojpv.png

However, when the same class is applied to a button, it appears to have a larger line height, causing the text to sit at the bottom of the button;

https://i.sstatic.net/7ZxV7.png

I've attempted to reset the button's line-height in the CSS file, but that did not resolve the issue.

Does anyone have any insight into what might be causing this discrepancy? How can I ensure that both buttons and anchor tags display in a consistent manner?

Answer №1

body{background:#666;}

.btn {
    background:transparent;
    border:2px solid #FFF;
    padding: 18px 30px 18px;
    line-height:1.7em;
    max-width:100%;
    white-space:normal;
    margin-top:25px;
    border-radius:100px;
    text-transform: uppercase;
    letter-spacing:0.1em;
    font-weight:bold;
    color:#FFF;
    text-decoration:none;
    transition:all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
<a class="btn">Download brochure</a>

<button type="button" class="btn">Download brochure</button>

The functionality appears to be functioning adequately independently - just a slight misalignment worth noting?

https://i.sstatic.net/Nz7ev.jpg

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

Javascript code for scrolling to the top isn't functioning as expected

I found a helpful code snippet for adding a scroll to top button on my webpage at the following link: http://jsfiddle.net/neeklamy/RpPEe/ Although I implemented the code provided, unfortunately, the scroll to top button is not displaying correctly. Here ...

Foundation framework enables the creation of a full width footer that stands out

I'm having trouble getting my footer panel to stretch across the entire page, it seems stuck in the center. The header at the top of the page spans the full width just fine. Am I missing something? My goal is to make both panels at the bottom of the p ...

Adjusting padding evenly across an unspecified number of columns

I'm currently facing a challenge with a multi-column layout. In a basic setup of three columns, I aim to adjust the padding so that each gap between the columns is consistent (2rem). However, the tricky part lies in crafting rules that can be applied ...

What is the best way to showcase my subscription form on a web browser?

I am encountering an issue with my code. My goal is to generate a subscribe form modal. Although I have incorporated the subscribe form in my HTML document, upon running the code in the browser, the subscribe section is not visible. Can anyone offer assist ...

The Bootstrap column class is malfunctioning

Recently, I've been diving into the world of web development. I attempted to create three divs in one row using Bootstrap col class, but unfortunately it didn't turn out as expected. Two divs ended up in a row with some blank space, while the thi ...

Issue with aligning CSS in Internet Explorer 7

Everything looks great on Firefox and IE8, but on IE 7 the middle "search input text field" is not aligned properly with the other two fields. It seems to be dropping down slightly. Here is the code - thank you for your help: <!DOCTYPE html PUBLIC "-/ ...

Revamp the appearance of angular material inputs

I have been working on customizing the style of an Angular Material input. So far, I successfully altered the background-color with the following code: md-input-container { padding-bottom: 5px; background-color: #222; } I also changed the placeh ...

What is the best way to position the menu along the right side of the container?

Apologies if this question seems trivial, but I have been struggling to find a solution for positioning my navigation bar on the right side of the container (prior to the order button). Despite hours of searching, I still haven't come across a viable ...

In CSS3, utilize the calc() function to vertically center elements using viewport height (vh) and viewport

One of the most common cases involves using vh for setting the height of a div, and using vm for adjusting font size. Using CSS3 div.outer { height: 20vh; } div.inner { font-size: 3vw; height: auto; } div.inner2 { font-size: 2vw; } HTML - Scenario 1 <d ...

Showing the computation outcome on the identical page

I have implemented a table within my PHP code. In the second column of this table, it typically displays "---". However, once I click the submit button, the same page should now display the calculated result. Here is an example: <table> <tr>& ...

Are you experiencing issues with Font Awesome Fonts failing to load?

I am currently using a rails app with bower to manage my assets, avoiding gems for JS and CSS. In the directory vender/assets/stylesheets, I have "font-awesome" containing both scss and fonts. In app/assets/stylesheets/application.scss, I have included va ...

Store the arrays in a JSON file before utilizing Array.push() to append data into it

I'm currently developing a calendar software and I want to store events in a JSON file. My strategy involves nesting arrays within arrays in the JSON format, allowing for easy iteration and loading during program initialization. My main question is: ...

The chosen Material UI tab stands out with its distinct color compared to the other tabs

Just dipping my toes into the world of Material UI, so bear with me if this question sounds a bit amateur. I've been playing around with Material UI Tabs and successfully tweaked the CSS to fit my needs. Take a look below: https://i.stack.imgur.com/B ...

Centralized navigation bar

I am currently facing a challenge with centering my nav bar and I'm not sure how to proceed. The nav bar is placed within a class and a div, which is causing confusion for me. I have attempted to align it to the center and also tried using float:cente ...

Hide a div when multiple classes are filtered using jQuery

I have several divs with the class .item. When the user clicks on the Classfilter submit button, all .item elements that also have at least one class from the dateClasses array (for example ['28.09.2015', '29.09.2015']) should be hidden ...

PHP and mysqli combine to create a versatile image slider with changing images

I am looking to implement an image slider that can be updated by the admin using php and mysqli. The admin should have the ability to easily add or remove images as needed. ...

What methods can be utilized to ensure that my wistia video player/playlist is responsive on different devices

I need some assistance with making my Wistia player responsive while using a playlist. I want the video player to adjust its size based on the screen size. Here is an example: My current code utilizes their iframe implementation: <div id="wistia_1n649 ...

Centering Text in CSS and HTML

Today I am pondering over how to align text horizontally on my website. The layout of us.mineplex.com's forums, shop, and title is perfectly aligned in a horizontal manner. I have tried to figure it out on my own but need some help. Thank you. CSS: ...

Choosing from a variety of tr elements

I'm working with a table in HTML that has about 100 rows. I would like to apply different colors to specific groups of rows, such as making rows 1-10 red and rows 20-40 blue. Using nth-child seems like an option, but it can get quite verbose if I nee ...

Display a background color behind an <img> element when the image's dimensions are smaller than the page

Currently, I am utilizing the following CSS for styling an image - check it out here img { border: 3px solid #ddd; margin-left: auto; display: block; margin-right: auto; background: red; } If you would like to view the output, click on this link - see it ...