I'm made this button that when hovered transitions the ::before in to change how the button looks. It works fine when there is no border but when a border is added it leaves a little bit of the background.
.submit-button {
font-size: 16px;
color: #FFFFFF;
background-color: red;
padding: 14px 16px;
border: 3px solid #FFFFFF;
transition: color 300ms cubic-bezier(0.3, 1, 0.8, 1);
border-radius: 24px;
cursor: pointer;
position: relative;
z-index: 1;
overflow: hidden;
}
.submit-button::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #FFFFFF;
border-radius: 24px;
z-index: -1;
transform: scaleX(0);
transform-origin: left;
transition: transform 300ms cubic-bezier(0.3, 1, 0.8, 1);
}
.submit-button:hover::before {
transform: scaleX(1);
}
.log-out-button:hover {
color: red
}
div {
background-color: red
}
<div><button class="submit-button log-out-button">hello</button></div>
Slightly different look but you could simplify your CSS and solve your border radius problem by depending on the overflow: hidden styling and having the background color of your transform fill the space of the shape (essentially falling behind the border).
.submit-button {
font-size: 16px;
color: #FFFFFF;
background-color: red;
padding: 14px 16px;
border: 3px solid #FFFFFF;
border-radius: 24px;
cursor: pointer;
position: relative;
z-index: 1;
overflow: hidden;
margin: 4px;
}
.submit-button::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #FFFFFF;
z-index: -1;
transform: scaleX(0);
transform-origin: left;
transition: transform 300ms cubic-bezier(0.3, 1, 0.8, 1);
}
.submit-button:hover::before {
transform: scaleX(1);
}
.log-out-button:hover {
color: red
}
div {
background-color: red
}
<div><button class="submit-button log-out-button">hello</button></div>
Related
I made an X with a circle using css.
There is a green line that is sticking out on top of the circle, how do I place it under the circle?
How would this be done?
code: https://jsfiddle.net/6wod3pLm/
That is all I am doing in the code.
.exitnew {
-webkit-appearance: none;
appearance: none;
position: relative;
box-sizing: border-box;
margin: auto;
padding: 0;
width: 48px;
height: 48px;
cursor: pointer;
background: blue;
border: none;
border-radius: 50%;
clip-path: circle(50%);
transition: all 1s ease;
overflow: hidden;
}
.exitnew:before,
.exitnew:after {
content: "";
position: absolute;
height: 5px;
top: 22px;
left: -1px;
right: -1px;
background: green;
transform: rotate(45deg);
transition: all 1s ease;
}
.exitnew:after {
transform: rotate(-45deg);
}
.exitnew:hover {
background: transparent;
}
.exitnew:hover:before,
.exitnew:hover:after {
background: green;
}
.exitnew b {
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 5px solid red;
border-radius: 50%;
}
<button class="exitnew" type="button" aria-label="Close"><b></b></button>
You don't need all these code. Here is an easier idea:
.exitnew {
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
margin: 0;
padding: 0;
width: 48px;
height: 48px;
cursor: pointer;
--b:7px; /* the thickness*/
--c:blue 90deg,green 0; /* the coloration */
background:
conic-gradient(from 90deg at var(--b) var(--b),var(--c))
calc(100% + var(--b)/2) calc(100% + var(--b)/2)/
calc(50% + var(--b)) calc(50% + var(--b));
border: 5px solid red;;
border-radius: 50%;
transform:rotate(45deg);
}
<button class="exitnew" type="button" aria-label="Close"></button>
You just need to use z-index property on the :after CSS selector:
.exitnew {
-webkit-appearance: none;
appearance: none;
position: relative;
box-sizing: border-box;
margin: auto;
padding: 0;
width: 48px;
height: 48px;
cursor: pointer;
background: blue;
border: none;
border-radius: 50%;
clip-path: circle(50%);
transition: all 1s ease;
overflow: hidden;
}
.exitnew:before,
.exitnew:after {
content: "";
position: absolute;
height: 5px;
top: 22px;
left: -1px;
right: -1px;
background: green;
transform: rotate(45deg);
transition: all 1s ease;
z-index: -1
}
.exitnew:after {
transform: rotate(-45deg);
}
.exitnew:hover {
background: transparent;
}
.exitnew:hover:before,
.exitnew:hover:after {
background: green;
}
.exitnew b {
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 5px solid red;
border-radius: 50%;
}
<button class="exitnew" type="button" aria-label="Close"><b></b></button>
:before and :after are like html bread on you element sandwich. :before is the bottom slice, and :after is the top slice.
Add a negative z-index to the :before, :after styles and that will position your :after behind the button the same as the :before.
.exitnew:before,
.exitnew:after {
content: "";
position: absolute;
height: 5px;
top: 22px;
left: -1px;
right: -1px;
background: green;
transform: rotate(45deg);
transition: all 1s ease;
z-index: -1;
}
EDIT WITHOUT Z-INDEX
.exitnew {
-webkit-appearance: none;
appearance: none;
position: relative;
box-sizing: border-box;
margin: auto;
padding: 0;
width: 48px;
height: 48px;
cursor: pointer;
background: blue;
border: none;
border-radius: 50%;
clip-path: circle(50%);
transition: all 1s ease;
overflow: hidden;
}
.exitnew:before,
.exitnew:after {
content: "";
position: absolute;
height: 5px;
width: 38px;
top: 22px;
left: 5px;
right: 5px;
background: green;
transform: rotate(45deg);
transition: all 1s ease;
}
.exitnew:after {
transform: rotate(-45deg);
}
.exitnew:hover {
background: transparent;
}
.exitnew:hover:before,
.exitnew:hover:after {
background: green;
}
.exitnew b {
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 5px solid red;
border-radius: 50%;
}
<button class="exitnew" type="button" aria-label="Close"><b></b></button>
You can set the z-index property to send the green line(s) backward, "behind" the circle:
.exitnew:before,
.exitnew:after {
content: "";
position: absolute;
height: 5px;
top: 22px;
left: -1px;
right: -1px;
background: green;
transform: rotate(45deg);
transition: all 1s ease;
z-index: -1;
}
here's an example: https://jsfiddle.net/q7zprh4w/
This is a solution without b and z-index:
.exitnew {
position: relative;
width: 48px;
height: 48px;
border: 5px solid red;
border-radius: 50%;
background-color: blue;
}
.exitnew::before {
content: "";
display: block;
position: absolute;
width: 10.416%;
height: 100%;
top: 0;
left: 44.792%;
background-color: green;
transform: rotate(45deg);
}
.exitnew::after {
content: "";
display: block;
position: absolute;
width: 10.416%;
height: 100%;
top: 0;
left: 44.792%;
background-color: green;
transform: rotate(-45deg);
}
I put the red border to the button itself. So the two pseudo element ::before and ::after aren't overlapping the red border.
Note: I don't use box-sizing: border-box
I want a button hover transition using an (I think) mask in the background.
A button that in normal state has a white background and black letters would have a black background sliding in from the side on hover making the letters white on the go. Like so:
I got it working using a before and after pseudo:
.button--slide {
background-color: #fff;
color: #000;
border-radius: 10px;
border: none;
padding: 10px 20px;
position: relative;
transition: all 0.5s ease;
cursor: pointer;
overflow: hidden;
}
.button--slide span {
position: relative;
z-index: 999;
}
.button--slide:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: calc(-100% - 35px);
top: 0;
background-color: #000;
transition: left 0.5s ease;
}
.button--slide:after {
content: "";
position: absolute;
top: 0;
left: -70px;
width: 0px;
height: 0px;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-top: 35px solid #000;
transition: left 0.5s ease;
}
.button--slide:hover {
color: #fff;
}
.button--slide:hover:before {
left: 0;
}
.button--slide:hover:after {
left: calc(100% - 35px);
}
See fiddle https://jsfiddle.net/5arj1emx/
It's not quite how I want it: I would like the background to mask the letters like in the example so that the letters turn white as the black background slides over it.
Is this possible?
do a background animation for both the pseudo element and the span and make the one of the span to color the text. I used a big transition time to better see the result;
body {
background-color: #efefef
}
.button--slide {
background-color: #fff;
color: #000;
border-radius: 10px;
padding:0;
border: none;
position: relative;
cursor: pointer;
overflow: hidden;
}
.button--slide span {
display:block;
padding: 10px 20px;
position: relative;
transition: all 5s ease;
color:transparent;
font-weight:bold;
background:linear-gradient(-45deg,#000 50%,#fff 0) right/220% 100% no-repeat;
-webkit-background-clip:text;
background-clip:text;
}
.button--slide:before {
content: "";
width: 100%;
position: absolute;
left: 0;
top: 0;
bottom:0;
background:linear-gradient(-45deg,transparent 50%,#000 0) right/220% 100% no-repeat;
transition: 5s ease;
}
.button--slide:hover span,
.button--slide:hover:before {
background-position:left;
}
<button class="button--slide">
<span>SEE OUR GLOBES</span>
</button>
I'm trying to create a hover effect, but the text isn't showing above the :before class.
Here is a codepen of the project https://codepen.io/designextras/pen/WNrJdbR
I'm not sure what edit's I would need to make to show the text above since the button text I can't add a z-index
Here is the css
.btn-2 {
width: 300px;
height: 100px;
border: none;
color: black;
border-radius: 4px;
transition: 0.3s ease all;
font-size: 2rem;
letter-spacing: 4px;
border: 3px solid #FF0072;
border-radius: 4px;
position: relative;
}
.btn-2:hover {
color: #000;
}
.btn-2:before {
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content: "";
background-color: #FF0072;
z-index: 1;
}
.btn-2:hover:before {
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
Here is the html
<button class="btn-2">HOVER</button>
Try to add this css code:
.btn-2 {
z-index: 1;
}
.btn-2:hover:before {
z-index: -1;
}
html
<button class="btn-2"><span>HOVER</span></button>
css
.btn-2 {
width: 300px;
height: 100px;
border: none;
color: black;
border-radius: 4px;
transition: 0.3s ease all;
font-size: 2rem;
letter-spacing: 4px;
border: 3px solid #FF0072;
border-radius: 4px;
position: relative;
}
.btn-2:hover {
color: #000;
}
.btn-2:before {
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content: "";
background-color: #FF0072;
z-index: 1;
}
.btn-2:hover:before {
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
.btn-2 span {
color: orange;
z-index: 3;
position: relative;
}
.btn-2:hover span {
color: #000;
}
eg:
ref: https://codepen.io/nani554/pen/jOWxYmG
I've made an animation for a button and it works OK for all last versions of browsers, but I had updated Firefox from v.48 to v.49 and after it my animation was broken. Please if anyone knows what exactly happened help me
example: https://jsfiddle.net/3woa73fz/ (the line to the left that appears and disappears)
code:
HTML:
<div class="button__container">
<a href="#" class="button">
<span class="button__text">Learn More</span>
</a>
</div>
CSS:
.button {
&__container {
position: relative;
left: 0;
right: 0;
bottom: 0;
}
overflow: hidden;
display: inline-block;
position: relative;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
height: 54px;
margin: 0 auto;
padding: 15px 38px 14px 37px;
background-color: transparent;
border-radius: 200px;
color: transparent;
cursor: pointer;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: inherit;
transition: border 0.3s ease;
z-index: 1;
}
&__text {
position: relative;
font-family: sans-serif;
font-size: 16px;
font-weight: 400;
color: #fff;
transition: color 0.3s ease;
}
}
.button:hover:before {
transform: translateX(0);
}
.button:hover:after {
border-color: #fff;
}
.button:hover .button__text {
color: #24BE51;
}
}
inside ".button" try adding :
mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
after ".-webkit-mask-image"
I know this is a simple formatting question, but I need to format some text inside a hover box over an image. I want to separate the hover text into two paragraphs, and the hover text is not covering the entire image for some reason...below is my hover CSS:
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
}
ul.img-list li {
display: inline-block;
height: auto;
margin: ;
position: relative;
width: 100%;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
display: table;
height: 100%;
left: 0;
position: justify;
top: 0;
width: 75%;
}
span.text-content span {
display: ;
text-align: center;
vertical-align: middle;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
display: table;
height: auto;
left: 0;
position: justify;
top: ;
width:100%;
opacity: 0;
}
ul.img-list li:hover span.text-content {
opacity: 1;
}
span.text-content {
background: rgba(0,0,0,0,5);
color: white;
display: ;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: opacity 2000ms;
-moz-transition: opacity 2000ms;
-o-transition: opacity 2000ms;
transition: opacity 2000ms;
}
You can do something like this code example here: JSFiddle
HTML:
<span class="tooltip" data-tooltip="I'm small tooltip. Don't kill me!">Hover me!</span>
CSS:
.tooltip {
border-bottom: 1px dotted #0077AA;
cursor: help;
}
.tooltip::after {
background: rgba(0, 0, 0, 0.8);
border-radius: 8px 8px 8px 0px;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
color: #FFF;
content: attr(data-tooltip); /* The main part of the code, determining the content of the pop-up prompt */
margin-top: -24px;
opacity: 0; /* Our element is transparent... */
padding: 3px 7px;
position: absolute;
visibility: hidden; /* ...and hidden. */
transition: all 0.4s ease-in-out; /* To add some smoothness */
}
.tooltip:hover::after {
opacity: 1; /* Make it visible */
visibility: visible;
}