I have a button with only a single tag (<a>). I want to skew the background of the button and keep the text as is, so I'm using this code, which is working as expected in my Codepen example:
<a class="et_pb_button et_pb_pricing_table_button" href="#">$200 / Month</a>
.et_pb_pricing_table_button {
margin: 10px;
cursor: pointer;
background-color: transparent;
border: none;
height: 50px;
padding: 10px 60px;
position: relative;
color: #000000;
font-weight: bold;
text-decoration: none;
}
.et_pb_pricing_table_button:after {
z-index: -1;
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: skewX(-15deg);
border-radius: 0px;
background-color: #ffd100;
}
.et_pb_pricing_table_button:hover:after{
background-color: skyblue;
}
However, when I apply that code to my page, it is not rendering as expected (not visible). I can't find anything that is stopping this from working (the parent elements are position: relative). I also tried increasing the z-index of the pseudo selectors, but that didn't help either. What am I missing?
Related
I have button with a pseudo element I placed underneath to create a clicking effect. I wrote this code:
button {
appearance: none;
--webkit-appearance: none;
background-color: #0070c9;
border-radius: .3em;
border: none;
color: white;
display: inline-block;
font: inherit;
font-size: 1.5em;
padding: 5px 10px;
position: relative;
text-transform: uppercase;
}
button::after {
background-color: #005496;
border-radius: .3em;
bottom: -.2em;
content: '';
height: 100%;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
}
button:active, button:focus {
outline: none;
}
button:active {
transform: translateY(0.1em);
}
button:active::after {
bottom: -.1em;
}
<button>Button</button>
When the button is clicked, the pseudo element becomes the background of the button; I want the light background to remain over the pseudo element while the transform occurs and after. Is there a reason that the pseudo element moves under the text but above the background of the button?
Note: I am not using any vendor-prefixed CSS in my original code, I just added --webkit-appearance: none; to this page; I will use a post-processor to handle this later.
Edit
The button looks like the left when not in active state, and the the right image in active state.
I do not want the button to become dark when it is in active state. I want the background to remain the same.
I want the button to look like this when it is clicked:
I have added a ::before pseudo element as well and then shifted the z-index of the :before and :after pseudo elements when the button is active. I have also added a span around the buttons text and added a positition of relative and a z-index of 3 to bring it to the front of the pseudo elements.
button {
appearance: none;
background:none;
--webkit-appearance: none;
border-radius: .3em;
border: none;
color: white;
display: inline-block;
font: inherit;
font-size: 1.5em;
padding: 5px 10px;
position: relative;
text-transform: uppercase;
}
button span {
position:relative;
z-index:3;
}
button::before, button::after {
border-radius: .3em;
content: '';
height: 100%;
left: 0;
position: absolute;
width: 100%;
}
button::before {
background-color: #0070c9;
top: 0;
z-index: 2;
}
button::after {
background-color: #005496;
bottom: -.2em;
z-index: 1;
}
button:active, button:focus {
outline: none;
}
button:active span {
bottom: -.2em;
}
button:active::before {
z-index:2;
background:none;
}
button:active::after{
z-index:1;
background-color: #0070c9;
}
<button><span>Button</span></button>
I have a button with a background color, and text color set. What I like to do, is when the user hover the mouse on the button, the background to animate from bottom to top and change the color of the text to the color of the background.
For terms of simplicity of the code, I didn't put the transient I like to apply on the CSS properties. I know it's much easyer to change the button background code, but I plan to use transient for changing the :before height on hover.
So I have the following code, but when I hover the mouse on the button, the :before overlapping my button text.
I have also try to play with the z-index but no luck. Do you think is there any solution to this problem ?
body {
background: #111;
}
.btn {
color: #FFF;
background: #333;
border: none;
font-size: 18px;
font-weight: bold;
padding: 18px 60px;
position: relative;
}
.btn:before {
display: block;
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background: #FFF;
}
.btn:hover {
color: #333;
}
.btn:hover:before {
height: 100%;
}
<br />
Do Stuff
You need to add additional <span> element which would stay above the ::before pseudoelement:
span {
position: relative;
z-index: 1;
}
fiddle
The effect you desire can also be achieved without adding the additional span. By utilising the before and after pseudo elements for background colours and positioning them correctly.
To position the pseudo elements behind the text, set a positive z-index on the element and a negative z-index on the pseudo-element.
.btn {z-index: 1}
.btn:before {z-index: -1;}
Reference this article by Nicolas Gallagher which explains in more detail, see section 'Pseudo background-position' http://nicolasgallagher.com/an-introduction-to-css-pseudo-element-hacks/.
Also see fiddle with it in action: https://jsfiddle.net/j9whmcmz/2/
This technique does not work if you apply a background color to the .btn itself.
Choose your poison I guess, both solutions do the trick.
Try this:
body {
background: #333;
}
.btn {
color: #FFF;
background: #333;
display: inline-block;
position: relative;
overflow: hidden;
-webkit-transition: color 0.3s ease-in-out;
transition: color 0.3s ease-in-out;
}
.btn span {
display: inline-block;
padding: 18px 60px;
border: none;
font-size: 18px;
font-weight: bold;
z-index: 10;
position: relative;
}
.btn:after {
display: block;
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
max-height: 0;
background: #FFF;
height: 100%;
z-index: 9;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.btn:hover {
color: #333;
}
.btn:hover:after {
max-height: 100%;
top: 0;
}
<span>Do Stuff</span>
Solution if pretty obvious - content of the button should be also absolute positioned. Then browser order them properly behind each other.
EDIT: Maybe my formatting and styling is not the best for the case, but it was quick update of your code to get the idea
body {
background: #111;
}
.btn {
color: #FFF;
background: #333;
border: none;
font-size: 18px;
font-weight: bold;
padding: 18px 60px;
position: relative;
}
.btn span {
display: block;
content: '';
position: absolute;
top: 18px;
left: 0px;
width: 100%;
text-align: center;
}
.btn:before {
display: block;
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background: #FFF;
}
.btn:hover {
color: #333;
}
.btn:hover:before {
height: 100%;
}
<br />
<span>Do Stuff</span>
I want to replace a button with a Font Awesome icon in css, but I can't hide the text of the button.
button {
border: medium none;
bottom: 0;
font-size: 35px;
left: auto;
overflow: hidden;
padding: 0;
position: absolute;
right: 20px;
top: 0;
background-color: white;
cursor: pointer;
}
button::before {
color: rgba(0, 0, 0, 0.25);
content:"";
font-family: FontAwesome;
position: absolute;
right: 0;
}
http://jsfiddle.net/evhqz1rh/2/
How can I do this?
If you really must do this with CSS only (as opposed to just removing "menu" from your HTML), you can set the overflow: visible but position the element off the screen, then adjust the :before pseudo class to move its contents back onto the screen.
#primary-navigation-menu-toggle {
border: medium none;
bottom: 0;
font-size: 35px;
left: auto;
overflow: visible; /* change to visible */
padding: 0;
position: absolute;
right: 20px;
top: 0;
background-color: white;
cursor: pointer;
right: -500px; /* position off the page */
}
#primary-navigation-menu-toggle::before {
color: rgba(0, 0, 0, 0.25);
content:"";
font-family: FontAwesome;
position: absolute;
left: -470px; /* position on the page */
}
See it on this jsFiddle.
You don't have to use a button element to do this. A simple span or div would do as both support the onClick event.
Another option is to simply remove the "Menu" text from your button code:
<button aria-expanded="false" id="primary-navigation-menu-toggle"></button>
I am having difficulties centering a an input and borders around text that I created. I am trying to center it with a percentages based setting, so that it becomes more responsive. It seems the percentages are off and every time I go over left: 35%;, it does not move over anymore.
The same applies to my submit button, inside of the search input. I took the percentage left out because it did not do anything.
I have stored all of my code inside of this fiddle:
https://jsfiddle.net/ghp4t489/
But, to get the best option to view what I am trying to do, is to visit my website. realtorcatch.com/test_index
How can I get the text with borders/search bar to be centered in the page?
Here is my CSS
.search_option_container_out {
text-align: center;
top: 450px;
left: 30%;
position: absolute;
z-index: 111;
}
.search_option_box {
position: absolute;
text-align: center;
left: 40%;
}
.search_option_box li {
display: inline;
border: 1px solid black;
line-height: 2em;
padding: 20px 75px;
background: rgba(24, 24, 24, 0.3);
color: #FFFFFF;
cursor: pointer;
}
.search_option_box li:hover {
background: rgba(0,0,255, 0.3);
}
.home_searchbar_out {
text-align: center;
padding-top: 60px;
}
.home_searchbar {
padding: 10px;
}
.home_search_input {
position: absolute;
left: 45%;
width: 575px;
padding: 14px;
font-size: 1.1em;
}
#home_search_submit {
padding: 11px 20px;
position: absolute;
background-color: blue;
color: #FFFFFF;
cursor: pointer;
font-size: 1.1em;
z-index: 1;
}
your code demo here: https://jsfiddle.net/ghp4t489/4/
essentially, you want to use the concept of centering a container inside the page like so:
div {
width: 100px;
height: 100px;
border: 1px solid black;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div>my div here</div>
this code is using margin: auto to center the div in the page.
EDIT: https://jsfiddle.net/ghp4t489/7/ with button on the right and next to the input
https://jsfiddle.net/ghp4t489/9/ with button on right inside the input
I have a CSS tooltip that is being cut off when the hovered item is too close to the edge of the content area. See the links towards the bottom of this post: http://blog.betbright.com/top-stories/manchester-united-v-club-brugge-betting-preview/
Here is the code I'm using for the tooltip:
a.tooltip {
position: relative;
display: inline;
}
a.tooltip span {
position: absolute;
width:110px;
color: #FFFFFF;
background: #00A1E0;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltip span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #00A1E0;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltip span {
visibility: visible;
opacity: 1;
bottom: 30px;
left: 100%;
margin-left: -76px;
z-index: 999;
}
Any solutions you can recommend to stop the tooltip being cut would be appreciated.
Thanks,
Paul
You should set the overflow property on your .entry-content class to visible instead of hidden. Your current setting hides everything that does not fit within that div. Since your tooltip would be displayed partly outside your .entry-content div, a part is cut of unless you change the overflow property. So, your error is not in the tooltip, it's in a parent element.