I am using bootstrap 3 and some svg icons in my project. The text on the button which is using svg icon is coming on right bottom corner of the button not in the middle of the button.
the button code is
<button class="btn"><svg class="icon"><use xlink:href="#play-button-1"/></svg>Previous</button>
the button css is
.btn {
background-color: #ff9800;
border: none;
color: white;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
}
copy code of icon buttons from a site.
You can try it without standard bootsrap 3 styles, because there is no BS class for vertical-align: middle
<button class="btn"><svg class="icon"><use xlink:href="#play-button-1"/></svg><span>Previous</span></button>
<!-- some extra span around the text -->
and
.btn {
background-color: #ff9800;
border: none;
color: white;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
}
.btn svg, .btn span {
display: inline-block;
vertical-align: middle;
}
Just add display:grid; inside .btn{}
.btn {
background-color: #ff9800;
border: none;
color: white;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
display:grid;
}
<button class="btn"><svg class="icon"><use xlink:href="#play-button-1"/></svg>Previous</button>
Related
When I hover over the button, it stops displaying "Middle School" and instead just becomes a white bar. How do I fix this without using
.buttonM {
width: 100%;
/* set a width so it doesnt change upon hover */
border: 1px solid #fff;
background: #de5426;
padding: 3px 21px;
color: #ffffff;
font-size: x-large;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
vertical-align: middle;
letter-spacing: 1px;
font-weight: bolder;
font-family: "montserrat";
}
.buttonM:hover span {
display: none
}
.buttonM:hover {
background-color: #fff;
color: #de5426;
cursor: pointer;
}
.buttonM:hover:before {
content: "Middle School";
}
<button class="buttonM">
<span>Middle School</span>
</button>
I understand you confusion. I was this confused when I started too.
anyway, you don't need to add span in a button unless you have a purpose for that.
the problem happens because you added hover to the span and to the button. so my advice is to minimize your code as much as possible. you also added two font family for the button. don't do that. also don't add cursor: pointer in the hover. you should put it in the button style, not its hover.
here is a working button from your code and I hope it's what you need.
.buttonM {
width: 100px;
height: fit-content;
background: #de5426;
color: #fff;
font-size: x-large;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}
.buttonM:hover {
background-color: #fff;
color: #de5426;
}
<button class="buttonM">
<span>Middle School</span>
</button>
I have some cards and want to change the properties border-color and pointer-events when a user hovers a span tag which is inside a button tag.
This is no problem if i use a tag, see First Card on the left:
https://codepen.io/anon/pen/JzzEvj
However, when using a PRG pattern with form and button changing the pointer event and the border-bottom color when hovering does not work with Firefox. (See Second Card on the right side)
Any ideas how to fix this in Firefox?
Desired outcome see Card on the left:
The cursor should have pointer state when hovering the image
The cursor should have pointer state when hovering the card heading
The card heading's border-bottom color should change color when hovering the card heading
I spend a lot of time on this issue but only found this solution https://codepen.io/anon/pen/PLLWxJ which is not exactly the same, because
the card heading's border-bottom color changes when hovering any part of the card.
all parts of the card look clickable when hovering. The cursor state should only change to pointer when hovering the image or the card heading.
a {
text-decoration: none;
}
.product-cards-wrapper {
background: #fff;
padding: 64px 0;
}
.product-cards {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.product-card {
border: 1px dotted #ccc;
cursor: default;
margin: 0 16px 32px;
width: 250px;
text-align: center;
}
.product-card-img-wrapper {
align-items: center;
cursor: pointer;
display: flex;
justify-content: center;
height: 150px;
line-height: 0;
margin-bottom: 16px;
}
.product-card-heading {
border-bottom: 1px solid #e5e5e5;
color: #2bb3f0;
display: inline;
font-family: sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1.6;
text-align: center;
transition: border-color .2s;
}
.product-card-heading:hover {
border-color: #2bb3f0;
cursor: pointer;
}
.product-card-label {
background: #fee5ad;
border-radius: 99px;
color: rgba(0, 0, 0, .54);
cursor: text;
font-family: sans-serif;
font-size: 14px;
font-weight: 600;
margin-top: 4px;
padding: 2px 10px;
}
.product-card>button {
background: 0;
border: 0;
padding: 0;
width: 100%;
}
.product-card-heading {
border-bottom: 1px solid #e5e5e5;
color: #2bb3f0;
cursor: pointer;
transition: border-color .2s;
}
.product-card button .product-card-img-wrapper,
.product-card button .product-card-heading {
cursor: pointer;
}
.product-card button .product-card-heading:hover {
border-color: #2bb3f0;
}
.product-card-labels {
display: block;
font-family: sans-serif;
}
<section class=product-cards-wrapper>
<div class=product-cards>
<a class=product-card href=#>
<div class=product-card-img-wrapper>
<img src=https://via.placeholder.com/160x150 alt="">
</div>
<div class=product-card-heading>First Card</div>
<div class=product-card-labels><span class=product-card-label>Label</span></div>
</a>
<form class=product-card action=# method=post target=_blank>
<button name=l value=123>
<span class=product-card-img-wrapper>
<img src=https://via.placeholder.com/120x150 alt="">
</span>
<span class=product-card-heading>Second Card</span>
<span class=product-card-labels><span class=product-card-label>Label</span></span>
</button>
</form>
</div>
</section>
This was a six years old Firefox bug which was fixed in Firefox 66.
Children of the button tag now do respond to :hover. :)
My CSS stylesheet loads almost all the contents but it is not loading my CSS for button. It's strange because all other things are working fine. I use opera. I have posted the CSS below which is not loading, also how I load the CSS.
<link rel="stylesheet" type="text/css" href="/style.css">
.button {
background-color: #22a4a3b5;
border: none;
color: white;
padding: 4px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
margin: 0px 2px;
cursor: pointer;
}
JS fiddle https://jsfiddle.net/hpsj2e0L/
It works fine in the fiddle but not in my site.
The problem with your code is that you are writing CSS inside your HTML file without wrapping it into a <style> tag. Like this:
<style>
.button, button {
background-color: #22a4a3b5;
border: none;
color: white;
padding: 4px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
margin: 0px 2px;
cursor: pointer;
}
</style>
also, you don't need both selectors if you are applying the style to a <button> you can just use button.
.button is only necessary if you are going to apply it as a class like in <div class="button"></div>
Check other style files to button class. Try give the different class name or load your style file later than others.
make sure you put your css in style tag or in css file
<style>
.button, button {
background-color: #22a4a3b5;
border: none;
color: white;
padding: 4px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
margin: 0px 2px;
cursor: pointer;
}
</style>
also check if you have .button class in your html or maybe its button tag
I'm trying to set a :hover for a link inside a class. At first I tried
.link{
color: #e62739;
}
I saw past discusssion and try the solution proposed
.opener a.link:hover {
color: #e62739;
}
but it didn't work. Im'not sure to know where is my mistake.
.link{text-decoration:none; color:white;}
.opener a.link:hover {
color: #e62739;
}
.row {
display: flex; /* equal height of the children */
}
.col {
flex: 1; /* additionally, equal width */
padding: 1em;
border: solid;
}
div {font-family:'Varela Round';
}
.opener {
background-color: #07183d;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border: 1px white solid;
}
.benefits {
background-color: #07183d;
border: none;
color: white;
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
width:300px;
}
a {
text-decoration: none;
}
#upbutton {
border: 1px dotted white;
}
<div class="row">
<div class="opener col" style="padding-left: 10px;padding-right: 10px;"><a class="link" href="www.google.com" name="1" onclick=" show('1');" style="color: white;font-size: 14px;">SOCIETES: 400</a>
<div class="benefits" id="b1" style="display: none; color: white; font-size: 14px;">Part SBF 120 : 120<br />
Part Filiales +100M€: 280
<div id="upbutton"><a onclick=" hide('1');">fermer</a></div>
</div>
</div>
The issue is the inline styling you've got on the link: color: white;.
This is taking priority over any styling you're adding in your CSS file. Removing that from the inline styling allows the hover color to work.
If you need the white color by default add it to the stylesheet rather than inline. For example:
.link {
color: white;
}
I want to remove blank spaces between the buttons, so that when I for example hover over the NORMAL button, there will be no blank space between it and the HARD button. How can I do that and where do these blank spaces come from?
body {
margin: 0;
}
#stripe {
background-color: white;
text-align: center;
height: 50px;
color: black;
}
button {
border: none;
background: none;
text-transform: uppercase;
height: 100%;
font-weight: 700;
color: black;
letter-spacing: 1px;
font-size: inherit;
transition: all 0.3s;
outline: none;
}
button:hover {
color: white;
background: black;
}
.selected {
color: white;
background: black;
}
<div id="stripe">
<button class="mode">Easy</button>
<button class="mode">Normal</button>
<button class="mode selected">Hard</button>
</div>
Browsers always add spaces between some elements, including buttons. To remove these, you need to set font-size to zero for their parent container. Then, to restore text size inside buttons, set font-size for them.
#stripe {
font-size: 0;
}
button {
font-size: 14px; // Set font size that you need here
}
Either remove the spaces and carriage returns, or put an HTML comment between them.
body {
margin: 0;
}
#stripe {
background-color: white;
text-align: center;
height: 50px;
color: black;
}
button {
border: none;
background: none;
text-transform: uppercase;
height: 100%;
font-weight: 700;
color: black;
letter-spacing: 1px;
font-size: inherit;
transition: all 0.3s;
outline: none;
}
button:hover {
color: white;
background: black;
}
.selected {
color: white;
background: black;
}
<div id="stripe">
<button class="mode">Easy</button><!--
--><button class="mode">Normal</button><!--
--><button class="mode selected">Hard</button>
</div>
Add display: flex; to the parent container
If using bootstrap, can group buttons together by wrapping in div with class="btn-group".
Example for v3.3.7: https://getbootstrap.com/docs/3.3/components/#btn-groups-single
Visually might or might not be what you want. Has rounded corners on left and right ends and straight line between buttons. Can probably restyle.