This question already has answers here:
CSS change button style after click
(8 answers)
Closed 2 years ago.
how can i disable the clicked button style { the black border}
.cols-1 button {
position: absolute;
bottom: 50%;
right: 50%;
margin: 0px -160px -40px 0px;
background-color: #aec7ca;
color: #ebebeb;
border: none;
border-radius: 0.3rem;
padding: 25px 85px;
transition: all 0.3s ease 0s;
}
If you are referring to the style that the button gets when it's in focus (using tabs or by clicking), it's removed using:
outline: none;
However this is considered bad for accessibility so consider keeping the outline, but giving it a more subtle styling.
.myButton:focus {
outline: thin dotted;
outline-color: #cccccc;
}
Related
This question already has answers here:
How to make a hover effect for pseudo elements?
(4 answers)
Closed 11 months ago.
Is it possible to add :hover to ::after or ::before elements?
I've tried it in multiple ways but it's not working, is there another workaround for it.
Coincidentally, I just used this snippet for the hover::after demo.
The button shadow is using button::after, but whenever a user hovers on that button (button:hover::after), the button shadow needs to be reset to position (0,0) for matching with the original button layer.
body {
background-color: black;
}
button {
position: relative;
color: black;
font-size: 1.625rem;
background-color: yellow;
border: 1px solid white;
padding: 15px 50px;
cursor: pointer;
transition: all 0.2s;
}
button:hover {
background-color: transparent;
transform: translate(0.8rem, 0.8rem);
color: white;
}
button:hover::after {
content: "";
left: 0;
top: 0;
}
button::after {
content: "";
position: absolute;
left: 0.8rem;
top: 0.8rem;
width: 100%;
height: 100%;
background: transparent;
border: 1px solid white;
transition: all 0.2s;
z-index: -1;
}
<button>
BUY
</button>
If it's still not working for you, you need to check content attribute is used in pseudo styles or not. If it's not there, no pseudo styles will be applied.
This question already has answers here:
Thick underline behind text
(7 answers)
Closed 2 years ago.
How can I transfer the red stripe under the text?
.nav-menu > ul > li > a:before {
content: "";
position: absolute;
width: 100%;
height: 7px;
bottom: 5px;
left: 0;
background-color: #ff1900;
visibility: hidden;
width: 0px;
transition: all 0.3s ease-in-out 0s;
}
You can do border-bottom: 5px solid red; if you want the red bar under the text
I think text-decoration: underline red; should give you the wanted effect.
It may be useful if you'd share the code (with a snippet on codepen for example) and/or specify better the question;
Maybe you're trying to modify a wrong element, if it's possible you could add a class to the single element if you need the stripe just under the home text
This question already has answers here:
input height differences in Firefox and Chrome
(7 answers)
Closed 6 years ago.
So I have made something like this in firefox browser :
But in chrome (v53). The height property is not equal :
There is a difference of 1px of height.
Is there any solution? If you want to see the live page, just visit my site here
Sorry for my english.
The simplest solution would be to remove the individual borders on each div and just use the container to get what you need,
https://jsfiddle.net/uqdmvonv/
Example:
div.pp-footer1-container1 div.pp-footer1-fill4{
display: table;
border: 2px solid white;
border-radius: 8px;
}
div.pp-footer1-container1 div.pp-footer1-fill4{
border: none;
border-right: 2px solid white; // This is for that middle bar
}
div.pp-footer1-container1 div.pp-footer1-fill4 a:hover{
text-decoration: none;
background-color: white;
color: #ff0000;
transition: all .5s ease;
}
i have asp drop down list and i want to change the style of the right arrow
so , i put this line in my drop down class:
" background: url(Arrow.PNG) no-repeat right center;"
Now i want to "drow" the arrow with css3 instead of using arrow.png picture
i have this class that paint arrow:
.PaintArrow {
content: "";
display: inline-block;
width: 9px;
height: 9px;
border-width: medium 2px 2px medium;
border-style: none solid solid none;
border-color: -moz-use-text-color #D1202F #D1202F -moz-use-text-color;
box-shadow: none;
transform: rotate(45deg);
transition: border 0.2s ease-out 0s;
position: absolute;
z-index: 1000;
right: 14px;
top: 36px;
}
How can i connect this class to the background of my drop down(on the right size)??
Thanks for answers
I don't know anything about asp.net, but if normal CSS and HTML Elements work there, you could do something like the following.
Let's say your List-Element is called dropdown-li, which is a class in our case.
Then you could use the pseudo-element :before.
.dropdown-li:before {
/* All the styles you defined above in your Question. */
}
Hopefully I could help out, greetings.
Here is a demonstration-fiddle with some edited styles: http://jsfiddle.net/f79osge3/
I have a case where my design requires me to declare this class:
.panel {
position: fixed;
top: 100vh;
height: 90vh;
margin: 0px;
padding: 0px;
width: 100%;
transition-property: top;
transition-duration: 1s;
}
.panel:before {
background-color: inherit;
top: -1.5em;
width: 10em;
text-align: center;
font-weight: bold;
content: attr(id);
position: absolute;
border-bottom: none;
border: .5em solid black;
border-top-color: inherit;
border-left-color: inherit;
border-right-color: inherit;
border-bottom: none;
border-radius: 25%;
border-bottom-right-radius: 0%;
border-bottom-left-radius: 0%;
}
In short, panels are tabs that fly in when targeted via an foo style link.
In their default state panels sit just under the bottom of the screen,
This creates a row of hidden panel objects whose before's appear as tabs across the bottom of the screen.
HTML for these panels is <section id="about" class="panel color">...</section> (where the color classes are effectively presentational for the moment, but will be upgraded to reflect specific tab purposes.
So, the challenge I'm trying to solve is that status bars will block the panel tabs which feels wrong, and I believe the solution is to bump them up a little bit (3 or 4 VH) when any link is hovered. This preserves status bar integrity, link integrity and the look of the site; treating the status bar as if it were a window resize.
I had believed that a:hover ~ * .panel { top: 97vh; } was the correct solution to do this, but it doesn't seem to be firing.