I'm trying to add an icon inside a button. The problem is that whenever I add the icon, it changes the shape of the button (it makes it taller, and sometimes wider depending on how big the icon is), and it mis-aligns the text of the button so that it is no longer centered, rather the text has been pushed down.
<button>
<i class="material-icons">weekend</i>
Test
</button>
And the CSS:
i {
color: #669FAB;
font-size: 24px !important;
}
button {
min-width: 100px;
}
https://jsfiddle.net/uxs71ymz/1/
I would like the icon to shift to the left, while having the text remain centered inside the button.
hi here is the css code
CSS
i {
color: #669FAB;
font-size: 24px !important;
vertical-align:middle;
}
button {
min-width: 100px;
}
hope this helps..
https://jsfiddle.net/hq9t8rk4/
button i.material-icons {
color: #669FAB;
font-size: 24px;
// Add the below
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
}
button {
min-width: 100px;
// Add the below
position: relative;
padding: 3px 50px;
line-height: 24px;
text-align: center;
}
Related
I have this buttons which have a hover effect that renders a span on top of the hovered button.
It works fine, but, when the width of the screen changes, it looks very bad:
These are the elements:
<div className='buttons'>
<button
className={editor.isActive('bold') ? 'is-active' : 'is-inactive'}
>
<strong>N</strong>
<span className='popup'>Negrita (Ctrl+B)</span>
</button>
<button
className={editor.isActive('italic') ? 'is-active' : 'is-inactive'}
>
<em>C</em>
<span className='popup'>Cursiva (Ctrl+I)</span>
</button>
<button
className={editor.isActive('strike') ? 'is-active' : 'is-inactive'}
>
<s>T</s>
<span className='popup'>Tachado (Ctrl+Shift+X)</span>
</button>
... (you get the idea)
</div>
This is the scss:
.buttons button {
position: relative;
height: 29.19px;
color: #000;
border: 1px solid black;
border-radius: 0.3rem;
margin: 0.2rem !important;
padding: 0.1rem 0.4rem !important;
background: white;
accent-color: black;
font-weight: 500;
}
button .popup {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-bottom: 5px;
margin-left: -60px;
}
button .popup::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
button:hover .popup {
visibility: visible;
}
What im looking for
I decided that the best solution would be a horizontal scroll. The problem is that the span is absolute positioned based on the button so i cant figure it out a way to keep the span on top of the hovered button while having an horizontal scroll.
Update 1
Ok, i tried to add a scroll, this is whats happening now:
As you can see, the scroll is working fine but the spans are 'covered', is there a way to fix this?
I added this to the code:
.buttons {
position: relative;
overflow-x: scroll;
white-space: nowrap;
}
Have a look at the definition of the absolute here
The element is removed from the normal document flow, and no space is
created for the element in the page layout. It is positioned relative
to its closest positioned ancestor, if any; otherwise, it is placed
relative to the initial containing block.
And positioned ancestor:
A positioned element is an element whose computed position value is
either relative, absolute, fixed, or sticky. (In other words, it's
anything except static.)
So, it should work even while having an horizontal scroll if you set position:relative for .buttons.
I have created an element where when you hover within the area of the element a hover effect is applied (change background colour), on top of this element is a button.
When I hover over the button it causing the other hover effect to disappear, I want to be able to keep the hover for the whole time that the mouse is within the area of the first element.
Example Code Here
So when I hover over the button in the example, I still want the background of the a tag to be black. At the moment when I hover over the button it causes the black background to disappear. I also still want to be able to click on the button.
To achieve what I want to achieve would I need to use js? Or can it be done in CSS?
#button1 {
position: absolute;
z-index: 100;
top: 10%;
left: 15%;
}
#label {
position: absolute;
z-index: -10;
border: 1px solid red;
width: 200px;
height: 200px;
text-align: center;
}
#label span {
color: white;
}
#label:hover {
background-color: black;
}
#label button:hover{
color:white;
<a id="label"><span>Hidden Until Hover</span>
<button id="button1">Test Button</button>
</a>
you need to wrap your button inside the #label !
this is how its work !
Put #label in front, and use + select next slibing dom
#button1 {
position: absolute;
z-index: 100;
top: 10%;
left: 15%;
}
#label {
position: absolute;
z-index: -10;
border: 1px solid red;
width: 200px;
height: 200px;
text-align: center;
}
#label span {
color: white;
}
#label:hover {
background-color: black;
}
#button1:hover + #label {
background-color: black;
}
<button id="button1">Test Button</button>
<a id="label"><span>Hidden Until Hover</span></a>
The link "CATEGORIAS" (marked in purple) redirects to the main page and the "+" sign opens a dropdown. So if the user click through the link "CATEGORIAS" would be redirected to the main page.
We want to occupy 100% width of the screen with the :after pseudo-element covering the link. So if the user click in "CATEGORIAS", its really clicking the :after element.
http://i.imgur.com/z3QIrCU.jpg
http://i.imgur.com/ORJguW0.jpg
span {
position: absolute;
top: 0;
width: 100%;
height: 30px;
background-color: rgba(137,142,236,0.5);
}
span:after {
font-family: "FontAwesome";
content: "\f067";
font-size: 26px;
color: #7f7355;
cursor: pointer;
top: 3px;
}
Thank you
Have you tried this? Works for me.
.menu-mobile-grover,
.menu-mobile-grover:after {
width: 100%;
}
I want to make my button responsive, so I can't use the image together with background. I can use the second picture of the cart only, but how can style it, so part of it remains outside?
You could apply the background-image to a :pseudo-element of a button element and position them using top and left properties.
button {
position: relative;
width: 20%;
height: 35px;
background: #B7004A;
border: none;
border-radius: 5px;
}
button:before {
position: absolute;
content: '';
width: 100%;
height: 110%;
top: -7px;
left: -3px;
background: url(http://i.stack.imgur.com/Aiy4E.png) no-repeat;
background-size: auto 105%;
}
<button></button>
Is it something like this you are looking for?
jsFiddle: http://jsfiddle.net/vgayjg9j/2/
EDIT: updated the jsFiddle. It now sticks out.
<button><img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/shoping_cart.png" /></button>
button {
width: 120px;
height: 40px;
}
button img {
height: 100%;
float:left;
}
From your question I think you want to button to fill the screen if it is on smaller devices?
Media queries is where you should start.
Also make sure you use % for the width of the button, for example if you want you button to fill the screen the css would look something like this:
button {
width: 100%;
}
And if the image should not change then I would define the width of the image in pixels:
button img {
width: 40px;
}
EDIT Changed the text to reflect better the problem.
For live demo you see the website here: http://wow-klickers.de/ (The CSS here I have modified, to maybe solve the problem.)
So I have the following scenario. My website contains a navigation bar, which in the picture above contains a "Forum" button and there is above a logo. If I go over the button the hover effect hides the part of the logo which extends into the button. I want to hover over the button but not hide the part of the logo.
Here are my code snippets:
<h1 id="logo"> // the blue box of the 2. picture
// the blue box of the 1. picture
</h1>
CSS things:
#logo a {
width: 275px;
height: 126px;
display: block;
position: relative;
bottom: 18px; // added here
}
h1#logo {
margin: 0;
position: relative;
left: 85px;
top: 6px;
background: url("images/logo.png") no-repeat;
width: 275px;
display: block;
z-index: 2; // changed here
height: 126px; // added here
}
#primary-menu-bar li a, #primary-menu-bar ul.menu li a {
display: block;
white-space: nowrap;
height: 37px;
line-height: 29px;
position: relative;
z-index: 1;
}
EDIT I tried with padding or margin, but with margin my logo is cut off but the logo should overlay over the button. And padding does not work..
Add z-index:10 to h1#logo, and not just on the a tag inside.