Can HTML and CSS be used to create button text that spans two lines with different fonts?

When working with HTML attribute values, I am facing an issue where I can't get button text to display in two lines with different font sizes.

I have attempted using whitespace in CSS for word wrap, but this solution does not solve my problem. I also tried using special characters like ampersand-hash13; and ampersand-hash10;, but they did not work either.

@media (min-height: 280px) {
.divNumKeypad {
        position: fixed;
        bottom: 0;
        width: 100%;
    }
.numberBtn{
    font-size: 30px;
    height: 68px;
}
<div class="col-xs-4 ">
    <input id="btnEight" type="button" tabindex="-1" value="HI HELLO" class="btn btn-primary btn-block numberBtn" onclick="buttonClick(8)" />
</div>

I am hoping to achieve a button that displays two lines of text. The first line should say "HI" in a larger font size, while the second line should show "HELLO" in a smaller font beneath it.

htmlcss

Answer №1

Give this a shot

@media (min-height: 280px) {
  .line-1,  {
    display:block;
    font-size: 20px
  }

  .line-2 {
    display: block;
    font-size: 10px;
  }
}
<div class="col-xs-4 ">
  <button>
    <span class="line-1">HI</span>
    <span class="line-2">HELLO</span>
  </button>
</div>

Answer №2

Try replacing input with button:

button {
  font-size: 30px;
}
<button>HELLO WORLD<br><span>GOODBYE WORLD</span></button>

Answer №3

Here's a solution you can try out: 

 label{
        max-width: 150px;
        font-size: 18px;
        display: block;
        padding:10px 20px;
        border:1px solid black;
        cursor: pointer;
    }
    label span{
        display: block;
        font-size: 14px;
    }
    label input{
        background:none;
        border:none;
    }
   input[value]{
       font-size: 0;
       display: none;
   }
<div class="col-xs-4 ">
        <label> <input id="btnEight" type="button" tabindex="-1" value="HI HELLO" class="btn btn-primary btn-block numberBtn" onclick="buttonClick(8)" />HI<span> HELLO</span></label>
</div>

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

What might be causing my direct descendant selector to not work as expected?

I'm struggling with my direct descendant selector. Let's analyze a straightforward example: .myDiv > table tr:first-child td { font-weight: bold; text-align: center; } <div class="myDiv"> <table style="width:100%"> < ...

htmlcsscss-selectorshtml-table

Tips for customizing the appearance of Java FX TableView column headers with CSS

I am relatively new to JavaFX and delving into CSS stylesheets, as well as using stackoverflow. I am curious about how one can customize the styling of a table column header. This is what my current column header looks like: Current appearance of my table ...

cssjavafxtableviewcolumnheader

Adjusting the size of <nav> element to accommodate its child elements

I've exhausted all possible CSS solutions today in an attempt to make my parent nav tag home-main-nav-menu resize based on its children and grandchildren, but it just won't cooperate. If anyone could provide a clear explanation on how to solve th ...

javascripthtmlcss

Setting constraints for table size with min-width and max-height

I have a coding dilemma involving the min-width and max-height properties in my table. The issue arises when I try to set these properties on the td element – they are being ignored by the browser. If I nest a div with the properties inside a td, the con ...

htmlcsshtml-table

Dynamically insert ID into a div element

Hi there, I have an ID "network" in the div class "parent". Inside this parent div, there is a for loop that generates multiple IPs. Whenever I click on a specific parent IP, it should call its child div. How can I dynamically generate IDs so that I can pl ...

jqueryhtmljquery-ui

PHP jQuery buttons for popovers

With a simple click of a button, I can generate 8 presentations and then edit each one individually by clicking on its respective name. Within this editing process, there is another form where I would like to include additional buttons that allow me to cus ...

javascriptphpjqueryhtmlyii2

Guide to invoking a jQuery function by clicking on each link tab

Below is a snippet of jQuery code that I am working with: <script> var init = function() { // Resize the canvases) for (i = 1; i <= 9; i++) { var s = "snowfall" + i var canvas = document.getElementById( ...

javascriptjqueryhtml

Moving the final item in the list to the end

I've chosen to implement the Vali Admin theme and am currently attempting to move the last list item in the left sidebar to the bottom. While I have limited experience with flexbox, I decided to change the menu to display: flex and followed the steps ...

htmlcssflexbox

Exploring the dynamic animation of jQuery slideDown with the layout manipulation of

My current project involves using an HTML table with multiple rows. I have hidden every second row, which contains details about the preceding row, using CSS. Upon clicking the first row, I am utilizing jQuery's show() function to display the second ...

jqueryhtmlcssuser-interface

Combining MySQL tables for main menu and subcategories

Working on a new project and seeking help with a certain situation. I have a SQL database featuring two tables: menu and submenu. The table structure is as follows: Menu: id | title | order Submenu: id | title | parentId Currently, I'm using two si ...

phpjquerymysqlcssmysqli

Unable to load images on website

I'm having trouble showing images on my website using Node.js Express and an HBS file. The image is not appearing on the webpage and I'm seeing an error message that says "GET http://localhost:3000/tempelates/P2.jpg 404 (Not Found)" Here is the ...

javascripthtmlnode.jsexpresshbs

Tips on incorporating background color into HTML emails dispatched via PHP mail()

Struggling to add a background color to my HTML email. I've attempted various methods: Inserting <script> tags with CSS code inside Adding bgcolor in body tags Using a CSS style sheet All to no avail. I suspect it could be the email provi ...

phphtmlcsshtml-emailemail

Tips for utilizing ion view within an ionic 2 application

In my original use of Ionic 1, I placed the footer after the <ion-content> and before . However, in the new Ionic 2, I can't seem to find any reference to <ion-view>. My specific need is to have two buttons at the bottom of the screen fol ...

htmlcssangularjsionic2hybrid-mobile-app

Creating custom components in React

At times, I find myself in need of a special UI component such as a multiple range slider. However, I have a preference for not relying on third-party libraries, so I usually opt to create the component myself. As time has passed, I have completely stopped ...

htmlreactjsformsredux

Applying CSS to Dynamic JavaScript Elements: A Guide to Styling Without In-line Code

I'm a beginner in web development and I've been experimenting with applying styles to dynamically generated div elements using JavaScript. So far, I've only been able to manually add inline styling through this function: function applyStyle( ...

javascripthtmlcss

What is the best way to avoid adding duplicate HTML content to Bootstrap modal divs using jQuery?

In my project, I wanted to create a functionality where clicking on an image would trigger a modal box to pop up with additional content added once. However, I encountered two issues that I'm currently facing. Firstly, the header text that I intended ...

javascriptjqueryhtmlcsstwitter-bootstrap

Achieving a centered SearchBar with a single button on the NativeBase header

I am trying to center the search bar with the menu button on the right side of the header using Nativebase. The code for this is provided below: <Header> <Body> <Button style={styles.searchButton} onPress={() => ...

cssreactjsreact-nativenative-base

Using ng-options with the Add New feature is not compatible with the select statement

Hello everyone, I have some JSON values that look like this: [{"Employee":{"Emp_id":"EF00001","First_name":"Aruna","Last_name":"Jayalath"}}] Unfortunately, I am having trouble retrieving the values within the select statement when running this function i ...

javascripthtmlangularjs

When Safari injects elements that were previously hidden with display:none, they remain visible

Using the JS library MagnificPopup, I implement popups on my website triggered by a "read more" button. This library moves the html to display it in a different location and then injects it back when the popup is closed. While this functionality works seam ...

javascriptcsssafarimagnific-popup

Is there a way to specifically style the element I am hovering over with Tailwind Typography and prose?

Currently, I am customizing my markdown pages with Tailwind typography and prose. I am facing an issue where the hover effect is being applied to all images at once instead of just the one being hovered over. Any ideas on how to fix this? Here is a snippe ...

cssfrontendtailwind-cssmarkdown