Different Text sizes within button - html

I'd like to display the text in parenthesis smaller than the rest of the button text.
<input type="button" value="Bigger Text (Smaller Text)"/>
Thanks for your support.


Try using button type="button" instead of input type="button". So inside you can define a different style for smaller text.
.btn {
font-size: 15px;
}
.btn .small {
font-size: 12px;
}
<button type="button" class="btn">
Bigger Text (<span class="small">Smaller Text</span>)
</button>

Related

Bootstrap button with text distributed in two lines with different font size at each line

I am working on a button in a web site.
This is the current button code:
<a href="pickupdeliverypu.php" class="button button-rounded" style=" margin: 0 auto;
text-align: center;color: #fff; background-color: #ff6600">Start Using Pickup & Delivery</a>
And this is the current output:
I would like to change the button as follows:
But I am not able to get the text with different font size at each button text line.

You could use a br tag, which would look something like this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="m-4">
<button class="btn btn-primary">
<span style="font-size:18px">Order Online</span><br/>
<span style="font-size:10px">Delivery & Pickup</span>
</button>
</div>
You can then also adjust the line-height of the br tag. Or assign classes instead of inline styling.

how to adjust gap between labels html/css?

I want to adjust labels text gap automatically between labels.
"Labels" are under the "Buttons".
Here is the code:
<style>
.btn{
margin-right: 5px;
display: inline-block;
text-align: center;
position:relative;
}
.btn label {
display: block;
position:relative;
}
</style>
<!-- Html Part - All show horizontically -->
<button class="btn">Medicine 1</button>
<button class="btn">Medicine 2</button>
<button class="btn">Medicine 3</button>
<button class="btn">Medicine 4</button>
<br>
<!-- here I want to adjust position button relative -->
<!-- I want position/gap of labels adjust automatically under the buttons -->
<!-- Labels under the buttons looks good and aligned-->
<label class="btn">2 mg</label>
<label class="btn">500 mg</label>
<label class="btn">650 mg</label>
<label class="btn">250 mg</label>
https://jsfiddle.net/
Any idea or suggestions would be welcome.

Add a margin-bottom: 15px to the .btn label css that you have in your code. Keep the rest of the code too because label is in fact an inline-element so you have to override it to display: block so that it acts like a block element and only then would the margin work on it.

Stop Bootstrap3 button text to turn underline on mouseover

I'm trying to stop bootstrap 3 default button to be underline when mouseover, but no success at all. Here is my CSS and HTML code:
.btn-default:hover {
font-style: normal;
background-color: white;
}
<button type="button" class="btn btn-default btn-lg">Tech Skills
</button>
Notice that I could change the :hover background-color, but looks like the propertie font-style is not referred to what I'm trying to change.
Here is how the button looks like:
Button Sample

Underlines are controlled by the text-decoration CSS attribute, not the font-style attribute. Also, the underline is not being applied to the button tag itself, but the anchor tag within the button.
See this demo:
a {
text-decoration: none;
}
<button type="button" class="btn btn-default btn-lg">Tech Skills
</button>

Aligning text next to a button with materialize CSS

I have a button and some text next to it. I'd like to match the text's vertical alignment with the button's. Here's what I have now:
Basically, I'd like the or Sign Up text to go a bit higher. I'm using MaterializeCSS as well. Here's the code I have for this:
HTML
<div class="center">
<button class="btn waves-effect waves-green green darken-1">Sign In</button>
<span class="alternate-option">or Sign Up</span>
</div>
CSS
.alternate-option {
margin-left: 20px;
}
I have tried using padding-bottom as well as margin-bottom.

This is caused by MaterializeCSS's button style :
margin-bottom: 15px;
An alternate solution to Mousa Dirksz's span repositionning would be to
remove the button's default margin :
HTML
<div class="center">
<div class="alternate-option">
<button class="btn waves-effect waves-green green darken-1">Sign In</button>
<span>or Sign Up</span>
</div>
</div>
CSS
.alternate-option button {
margin-bottom: 0px;
}
.alternate-option span {
margin-left: 20px;
}

Try to use:
.alternate-option {
margin-left: 20px;
vertical-align: baseline;
position: relative;
top:-5px;
}
Also look at: http://www.w3schools.com/cssref/pr_class_position.asp

For anyone looking to center a button and a link it's possible to use the following snippet:
<div class="valign-wrapper">
<button class="btn waves-effect waves-green green darken-1">Sign In</button>
<span class="alternate-option">or Sign Up</span>
</div>
.alternate-option {
margin-left: 10px;
}
It's important to note that using Materialize valign-wrapper class will vertically align children elements but it will remove the spacing between them that's why we need to add a margin-left on the span children.

Without knowing the full CSS, I suspect that you need to vertically align the button and span..such as:
button, span {
vertical-align: middle;
}

Try this suggestion
Use absolute positioning
CSS:
.alternate-option {
position:absolute;
left:numeric value*(adjust according screen size)*
top:numeric value*(adjust according screen size)*
}

Alignment issues with button on header using bootstrap 3?

I am using Bootstrap 3. Here is my HTML page:
As you can see the star is downside to the title. I want to align with title
Here is my html code:
<p class="pull-right visible-xs">
<h3><center>2000 Cadillac Eldorado Esc (Prospect heights) $3500
<button type="button" class="btn bookmark" id="1799" >
<span class="
glyphicon glyphicon-star-empty "></span>
</button>
</center>
</h3>
</p>
and css:
button.bookmark {
border:none;
background: none;
padding: 0;
}
.btn.bookmark .glyphicon {
line-height: inherit;
vertical-align: middle;
}

My answer to your previous question only works when the icon is adjacent to a .btn.
The idea being that the two align perfectly as if they were two .btns.
In this case you don't need the .btn class, you can just set the vertical align on the button.
<button type="button" class="bookmark" id="1799">
button.bookmark {
border:none;
background: none;
padding: 0;
vertical-align: middle;
}
Demo

I believe the line-height in your css that's causing it. It is inheriting the attribute and it might be smaller causing it to have too much space above it. If you have a link I can check it in firebug. If not try messing with that. You can also find some cool info about it Here
Hopefully that helps, Let me know if that does it