I want to re-declare css class style, but it's not working and I don't know why....
Maybe some description:
If user hover button, button move 1px down. But if I use button version 2 - class: button-v2, I want to disable this effect, but it doesn't works :/
Do you have any idea, how to solve it? Thank you very much :)
EDIT: When I run the snippet, it works as I want so, here is also link to real example: real example
.button {
border-radius: 3px;
border-right: none;
border-left: none;
border-top: none;
border-bottom: none;
cursor: pointer;
font-weight: 600;
position: relative;
padding: 2px 10px;
white-space: nowrap;
display: inline-block;
text-align: center;
}
.button.button-big {
padding: 12px 18px;
font-size: 110%;
}
.button:hover {
top: 1px;
}
.button:active {
top: 3px;
}
.button.button-v2:hover {
top: 0px;
}
.button.button-v2:active {
top: 0;
}
Some string
Some string
Related
How to add border bottom on hover effect as in this image
Add :hover for your button like this:
button {
width: 300px;
height: 60px;
border-radius: 10px;
background-color: #d94346;
border: none;
color: white;
font-weight: bold;
font-size: 1.3rem;
}
/* Add hover effect */
button:hover {
border-bottom: #bb262a 6px solid;
}
<button>Hover</button>
Is this result what you were expecting for ?
A box-shadowwould be more appropriate in my opinion.
EDIT: Comparing to the other answers I see, this way the button text won't move. 2 options.
button {
font-size: 30px;
padding: 30px 250px;
color: white;
background-color: #d84446;
border: none;
border-radius: 15px;
}
button:hover {
box-shadow: 0px 7px 0px #bb262a;
cursor: pointer;
}
<button>Hover</button>
you should do it in the other order
button:hover {
border-bottom: 4px solid #bb262a;
}
In my project I have a list of 'result items' which can be favourited and then they appear on in a favourites column to the side of the page.
To allow keyboard users easy access, I have created a hidden cta which allows them to skip directly to their favourited item, without having to tab through all the result items first.
I only want this cta to be visible when it is tabbed to. My understanding is that :focus-visible would enable this. However, for some reason, it's not working for me. My HTML and CSS look like:
.sr-only-focusable {
position: absolute;
visibility: hidden;
left: 56%;
top: rem(65);
border-radius: 5px;
border: 1px solid #d7d7d7;
background-color: $white;
padding: 1rem 2rem;
z-index: 10;
}
.sr-only-focusable:focus-visible {
visibility: visible;
}
<div class="sr-only-focusable">
<button tabindex="0" #click="skipToShortlist">Skip To Shortlist</button>
</div>
Could anyone help me figure out where i'm going wrong?
Thanks in advance
The button element is what you're trying to tab to, not the div it's contained in. Rather than trying to get to the div, target the button instead. Also, use opacity because visibility doesn't seem to play nicely with tabindex. You can also apply your styling to the button as well.
.sr-only-focusable {
position: absolute;
left: 56%;
top: rem(65);
z-index: 10;
}
.myBtn {
display: inline-block;
font-family: Helvetica, Arial, sans-serif;
color: black;
margin: 0 auto;
font-size: 1.2vw;
font-weight: 700;
line-height: 1.25;
letter-spacing: 0.5px;
cursor: pointer;
text-decoration: none;
opacity: 0;
border-radius: 5px;
border: 1px solid #d7d7d7;
background-color: $white;
padding: 1rem 2rem;
}
.myBtn:focus-visible {
opacity: 1;
}
<div class="sr-only-focusable">
<button class="myBtn" tabindex="0" #click="skipToShortlist">Skip To Shortlist</button>
</div>
From my experience (mostly on chrome) elements with display:none or visibility:hidden cannot be focused by mouse or by keyboard.
Most implementations use something along the lines of this:
.wrapper {
background: black;
text-align: center;
width: 360px;
height: 100px;
padding: 40px;
box-sizing: border-box;
color: blanchedalmond;
}
.image-nav-button {
color: blanchedalmond;
text-decoration: none;
font-size: 20px;
line-height: 1em;
width:1px;
height:1px;
position:absolute;
clip: rect(1px,1px,1px,1px);
clip-path: inset(50%);
}
.next {
float: right;
}
.prev {
float: left;
}
.image-nav-button:focus {
outline: none;
/* Try uncommenting below, then clicking the buttons */
/* outline: 3px solid red; */
}
.image-nav-button:focus-visible {
outline: 3px solid blanchedalmond;
width:auto;
height:auto;
position:relative;
clip: none;
clip-path: none;
}
<div class="wrapper">
← Prev Image
Next Image →
</div>
I'm trying to make a better looking label for a button when you hover over it, i was wondering how can i style the aria-label element to look like this screenshot i added below.
.
You can use the CSS attribute selector for this.
[aria-label] {
position: relative;
}
[aria-label="Search by voice"]:after {
content: attr(aria-label);
/* Your CSS here, this is just a random one for demonstration */
display: none;
position: absolute;
top: 110%;
left: 10px;
z-index: 5000;
pointer-events: none;
padding: 8px 10px;
line-height: 15px;
white-space: nowrap;
text-decoration: none;
text-indent: 0;
overflow: visible;
font-size: .9em;
font-weight: normal;
color: #fff;
text-shadow: 1px 0 1px #888;
background-color: #412917;
border-left: 6px solid #d37092;
border-radius: 2px;
box-shadow: 1px 2px 6px rgba(0,0,0,0.3);
}
a:focus {
outline:1px dashed #E92C6C;
}
[aria-label]:hover:after, [aria-label]:focus:after {
display: block;
}
When i hover over the question mark icon, the tool tip gets hide behind the header tab.
Look the attached image!!!
enter image description here
i need the tool tip to come above the header tab without getting hide.
This is my CSS enter image description here
.showmeonhover { display: none; }
.label-input100:hover .showmeonhover {
display: inline;
width: auto;
background-color: white;
color: #fff;
text-align: left;
border-radius: 6px;
padding: 5px 0;
border-color: #555 transparent transparent transparent;
bottom: 125%;
background-color: #555;
/* Position the tooltip */
position: absolute;
margin-left: -100px;
margin-bottom: -18px;
padding-left: 6px;
padding-right: 5px;
z-index: 200;
font-size: 8px !important;
text-transform:capitalize !important;
}
.ui-accordion .ui-accordion-header {
display: block;
cursor: pointer;
position: relative;
margin: 2px 0 0 0;
padding: .5em .5em .5em .7em;
font-size: 100%;
}
Sorry for my english.
You can try to define the z-index in your css-class.
like:
.headerTab{
z-index: 0;
}
.showmeonhover{
z-index: 1;
}
I need an outline of a button that is curved on the top and bottom, but not the sides. See the Sample Image below to understand what I'm asking for. I will style all the buttons on my website like this one. I've tried a few ways of doing this with border-radius but I haven't been successful yet. Thank you.
Use :before and :after to button
.btn {
border-top:none;
border-bottom:none;
border-right: 2px solid white;
border-left: 2px solid white ;
background-color: #273649;
color: white;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
}
body{
background-color: #273649;
}
.btn:after {
display: block;
content: "";
position: absolute;
width: 89px;
height: 16px;
border-top: white 2px solid;
top: 48px;
left: 7px;
border-radius: 40%;
}
.btn:before {
display: block;
content: "";
position: absolute;
width: 89px;
height: 16px;
border-top: white 2px solid;
top: 4px;
left: 7px;
border-radius: 40%;
}
<button class="btn">Info</button>
I know this is not the answer that you expected, but I think that the best way to get this result (being the easiest way to get decent results) is with a backgroung-image.
.button {
background-image: url(https://raw.githubusercontent.com/dknacht/GitHub-Test/master/rect4136.png);
background-size: 100% 100%;
}
I just post it in case that someone with similar needs wants to have an alternative.
here an example: https://codepen.io/dknacht/pen/qKbWaY
Dknacht.