add text above and below a button in a Button style

Just delving into HTML and CSS, I've created a button with the following styling:

.Btns {
            width:200px;              
            height:75px;
            background-color:lightblue;
            color:black;
            font-weight:bold;
        }

Here is the button I've created:

<button id="btnProduct" type="button" class="Btns"/> 

Then, I used jQuery to assign a value to it:

 $("#btnProduct").html('Production:'+sumOfpro+' Kw/h');

The variable 'sumOfpro' contains an integer value retrieved via Ajax. My query is, how can I position the text on top of the button and the value in the center or at the bottom? By 'text,' I mean 'production' and by 'value,' I'm referring to 'sumOfpro.' Thank you for any assistance you can provide.

Answer №1

.Button {
            width:200px;              
            height:75px;
            background-color:lightblue;
            color:black;
            font-weight:bold;
            padding: 0;
        }
<button id="btnProduct" type="button" class="Button">Production: 123<br/><br/><br/>Kw/h</button> 

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

jQuery Mobile panel buttons are functioning properly within a maximum width of 300 pixels

I have constructed a panel that adjusts its size based on the device's screen using responsive design techniques. The code for this panel is as follows: <div data-role="panel" data-position="right" data-display="overlay" data-theme="a" id="add-for ...

Update all website links to new domains

Looking for advice on solving a persistent issue. Our forum has existed on multiple domains throughout the years. One domain we used 5-6 years ago got lost, and now some posts in our forum still have links that direct to this old domain. What is the most e ...

The web server experiences a layout and functionality breakdown caused by an issue with the config.js file following the uploading process

I recently created a website. However, when I uploaded it to my hosting company's server and tested it on different browsers, the layout appeared broken. Some of the CSS files loaded properly, but certain elements and styles were not in their correct ...

What is the purpose of implementing asynchronous loading for JavaScript in my webpack setup?

I am facing difficulties with handling unusual codes. I am trying to add some query parameters using $.ajaxPrefilter in all jQuery ajax requests. I came across the following code snippet which seems to ensure synchronous loading order, but in my entry.js ...

What are your thoughts on using image maps with CSS?

My images are also links, and the code looks like this: <a href="../www.google.com"><img src="pages/squirrely.png" /></a> While they function properly as links, I want them to only be clickable if you click on the central part of the im ...

Using AdBlock Plus will conceal elements on a webpage that have ids or classes containing the term "ad"

In my website, there are two divs: one with the ID of ad_holder and the other with the ID ad_buttons. While testing the site on Mozilla with Adblock Plus installed, I observed that both divs were hidden. Upon further investigation, I discovered that Adblo ...

Alter the background of cards in real-time

I am unfamiliar with JavaScript, but I wish to utilize a function to alter the background color of multiple cards. function ChangeColorToGreen() { document.getElementById("ChangingCard").style.background = "green"; } function ChangeColorToPurple() { ...

I'm looking to optimize my paragraph for small screens by incorporating a Google AdSense banner

I need help adjusting my content with a Google banner for small screens. Here is an example image: Example Image Within the parent div with the class name parent-content, there is a banner div named ad3. Below is the code I have written for screens with ...

Letters are frolicking in varying sizes and designs

Currently, I am encountering a strange issue with the text on my webpage. Some fonts are displaying with completely different shapes and sizes despite using <meta charset="UTF-8"> to ensure font consistency. Unfortunately, this did not resolve the pr ...

Implementing serverside pagination using Datatable in Javascript: Passing POST request body data

Attempting to incorporate ServerSide pagination using Datatable for AJAX POST request The Javascript Code snippet below showcases the issue faced when utilizing JSON.stringify for data field, causing the API not to be triggered. $('#tripboard_table&a ...

React Side Panels that Collapse and Expand

Apologies if this task seems simple, as I am new to transitioning to React. My current application is primarily built with JavaScript, CSS, and HTML, and I am now looking to migrate it to React. There is a full-length horizontal side panel that is initiall ...

Can Jquery mobile detect drag gestures?

Is there an event in Jquery Mobile that allows you to hide/show a div by dragging it, similar to the effect seen on phones? I have searched on different platforms and found that using Jquery UI is the closest solution. Is it possible to achieve this only ...

What is the process for converting x and y coordinates to align with a fixed display?

When I make an API call, I am receiving X and Y coordinates in the following format: x: "-0.0120956897735595703" y: "0.147876381874084473" To display these coordinates on my minimap images, I have set their display to be absolute. The "left" and "top" pr ...

managing the action of a form to launch it with the help of facebox

Is there a way to use facebox to display a contact form and have the submit action also open in a facebox? Currently, I can easily open a link in a facebox using the rel attribute, like this: <a href="contact.html" rel="facebox">Contact</a> W ...

retrieve JSON response from struts2 controller

My web application utilizes jquery and struts2. I am now facing the task of embedding a Google map into my webpage and adding some markers to it. To accomplish this, I have used the jquery.getJSON() command to send a request to a struts2 action. Here is a ...

Troubleshooting: jQuery animation for background-color doesn't function in Internet Explorer

I've been working on a website and I'm trying to create a navigation bar similar to the one found at . My goal is to have the navbar transition from transparent to a colored background as the user scrolls down the page. For this project, I am ut ...

Ways to allocate space evenly between components of the same size in React Native

As a beginner in Javascript and React-native, I have been experimenting with the technology to assess its viability for potential use in my current workplace. However, I have encountered some challenges with the user interface. To enhance my understanding ...

tips for selecting a specific number of records using an ajax call

My database contains 10,000 records. Using AJAX, I am able to fetch all 10,000 records in JSON format. However, I want to modify the behavior so that it only fetches the first 100 records initially, and then fetches another 100 records on subsequent reques ...

Troubleshooting problem with table reflow in Bootstrap v4.0.0-alpha.3 on mobile devices

I am having trouble fixing the table-reflow issue in mobile view while trying out the code below. Any suggestions on how to resolve this would be greatly appreciated. Check out the image here To see the code, visit CODEPEN <div class="container"> ...

Matching CSS attribute values with another attribute

Can CSS be used to target elements based on the value of another attribute? For instance: <div data-attr1="abc" data-attr2="def"></div> <div data-attr1="abc" data-attr2="abc"></div> I am looking for something like this (although i ...