Below is my HTML/CSS code in which I am trying to create a similar effect like HOME button as mentioned here - https://codepen.io/larrygeams/pen/pdchG
I made it to a single class, but my code is not working. Let me know what I am doing wrong here.
.btn-primary {
background: green;
border: none;
border-radius: 10px;
padding: 10px 20px;
color: #FFF;
}
.btn-primary:hover {
color: #FFF;
cursor: pointer;
}
.btn-primary:after {
content: "";
height: 100%;
left: 0;
top: 0;
width: 0px;
position: absolute;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
z-index: -1;
}
.btn-primary:after:hover {
background: red;
width: 100%;
height: 100%;
}
<button class="btn-primary" type="submit">
<div class="inner">Add to bag</div>
</button>
My Non Working Codepen Link - https://codepen.io/anon/pen/gBdVoj?editors=1100
hover pseudo needs to be placed before ::after
:hover::after
.btn-primary {
width: auto;
position: relative;
background: green;
border: none;
border-radius: 10px;
padding: 10px 20px;
color: #FFF;
z-index: 2;
}
.btn-primary:hover {
cursor:pointer;
}
.btn-primary::after {
content: "";
position: absolute;
height: 100%;
left: 0;
top: 0;
width: 0;
border-radius: 10px;
transition: all 0.3s ease 0s;
z-index: -1;
}
.btn-primary:hover::after {
width: 100%;
background: red;
}
<button class="btn-primary" type="submit">Add to bag</button>
Related
I was told they should not be in there, but how do I remove them?
https://jsfiddle.net/jqzs6d3o/
That is all I am doing in the code.
Removing the <b> </b> tags from the html it.
How would that be done?
Is this something hard to do?
Removing <b></b> removes the blue circle. I want to keep the circle and remove <b></b>
<button class="exitnew" type="button" aria-label="Close"><b></b></button>
.exitnew {
-webkit-appearance: none;
appearance: none;
position: relative;
box-sizing: border-box;
margin: auto;
padding: 0;
width: 48px;
height: 48px;
cursor: pointer;
background: transparent;
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: red;
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 blue;
border-radius: 50%;
}
<button class="exitnew" type="button" aria-label="Close"><b></b></button>
Added some styles #circle ID and changed your positioning a bit of .exitnew Also made b display: none; Check the changes below.
.exitnew {
-webkit-appearance: none;
appearance: none;
position: relative;
box-sizing: border-box;
margin: auto;
padding: 0;
width: 48px;
height: 48px;
cursor: pointer;
background: transparent;
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: 17px;
left: -1px;
right: 5px;
background: red;
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 {
display: none;
box-sizing: border-box;
position: relative;
width: 100%;
height: 100%;
border: 5px solid blue;
border-radius: 50%;
}
#circle {
background-color:#fff;
border-width: 2rem;
border:4px solid darkblue;
height:45px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
width: 45px;
margin-left: 1rem;
position: absolute;
}
<button class="exitnew" id="circle" type="button" aria-label="Close"><b></b></button>
You can utilize the button itself as the circle.
With this you’ll have cleaner code where you can just completely remove b tag without losing the circle.
.exitnew {
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
width: 38px;
height: 40px;
border: 5px solid blue;
border-radius: 50%;
}
Here’s the changes I made.
https://jsfiddle.net/Lnbuxvc0/
In my code, the left border should be removed after .6s even when the cursor is still(hover) on the button
.button {
position: relative;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
padding: 10px 20px;
text-decoration: none;
color: inherit;
font-size: 20px;
}
.button::after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
height: 0%;
border-left: 1.5px solid black;
transition: 0.6s;
}
.button:hover:after {
transition: .6s;
height: 100%;
/*After hover(after.6s), height should be 0%*/
}
You can use callback function to fetch the end of a transition/animation.
Check out this article:
https://betterprogramming.pub/detecting-the-end-of-css-transition-events-in-javascript-8653ae230dc7
As suggested by #prettyInPink, Here is how you can use keyframes.
.button {
position: relative;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
padding: 10px 20px;
text-decoration: none;
color: inherit;
font-size: 20px;
}
.button::after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
height: 0%;
border-left: 1.5px solid black;
transition: 0.6s;
}
.button:hover:after {
/**
Added 1.2s to smoothly hide the border
From 0%-50% - .6s
From 50%-100% - .6s
**/
animation: borderAnim 1.2s ease-in-out forwards;
}
#keyframes borderAnim {
0% {
opacity: 1;
height: 0%;
}
50% {
opacity: 1;
height: 100%;
}
100% {
height: 100%;
opacity: 0;
}
}
<button class="button">My Button</button>
I'm trying to achieve div border in the convex shape and on hover it should be in normal square shape. I have added in the bottom as same I want to add on the top I tried using before but unable to achieve the result. Can anyone help me Below is my code so far I have done.
Any help will be appreciated
* {
box-sizing: border-box;
}
.services {
position: relative;
width: 500px;
height: 420px;
margin: 100px;
background-color: #cccccc;
transition: all 0.2s ease;
animation: down-bump 0.4s ease;
}
.services:before {
}
.serv_section {
top: 83%;
position: relative;
overflow: hidden;
padding: 50px 0 0;
}
.serv_inner {
position: relative;
background: #fff;
height: 25px;
}
.serv_inner:after {
box-shadow: 0 0 0 80px #fff;
border-radius: 100%;
position: absolute;
height: 150px;
content: '';
right: -20%;
left: -20%;
top: -150px;
transition: all 0.4s ease-in-out;
}
.services:hover .serv_inner:after {
top: -120px;
}
.serv_inner:before {
/* box-shadow: 0 0 0 80px #fff;
border-radius: 100%;
position: absolute;
height: 150px;
content: '';
right: -20%;
left: -20%;
top: 130px;
transition: all 0.4s ease-in-out; */
}
span.image_caption {
position: absolute;
color: red;
padding: 10px 20px;
font-size: 30px;
z-index: 10;
animation-duration: 2.5s;
animation-fill-mode: both;
}
span.image_caption p {
font-size: 32px;
font-weight: 900;
font-family: 'Dancing Script', cursive;
color: cadetblue;
}
<div class='services'>
<div class="serv_section">
<div class="serv_inner">
</div>
</div>
</div>
You can use the before and after elements to make the curve, on hover hide the psuedo elements behind the element and remove the curve like this:
.services {
position: relative;
width: 100px;
height: 60px;
margin: 100px;
background-color: #cccccc;
z-index: 0;
}
.services:hover:before{
top: 0px;
border-radius: 0;
}
.services:hover:after{
bottom: 0px;
border-radius: 0;
}
.services:before, .services:after{
content: ' ';
position: absolute;
width: 100%;
height: 40px;
background-color: #cccccc;
border-radius: 50%;
z-index: -1;
transition: all .4s;
}
.services:before {
top: -20px;
}
.services:after {
bottom: -20px;
}
<div class='services'>
</div>
If I understand it right you can achieve this by simple using of different values for horizontal and vertical dimensions of the border-radius property (more info at https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius):
div {
background: grey;
height: 100px;
width: 200px;
transition: border-radius .15s ease-out;
}
/* border-radius on default state */
div {
border: 4px solid black;
border-radius: 50%/20px;
}
div:hover {
border-radius: 0;
}
<div></div>
I am trying to fade in edits to elements in CSS when an element is hovered over. Specifically changing a border from solid to dotted, by fading in the change, how do I do that?
EDIT:
Perhaps I need to be more specific about context here is my current code:
li {
font-family: 'Roboto', sans-serif;
font-size: 20px;
color: black;
border-bottom: 1px solid black;
}
li:hover {
border-bottom: 1px dotted black;
opacity: 1;
transition: opacity 1s ease-in-out;
}
Here is some CSS trickery that gives that effect. The downside being the inside cannot be transparent.
div {
position: relative;
width: 50px;
height: 50px;
display: block;
border: 3px dotted red;
background: red;
transition: 1s ease-in-out all;
}
div:after {
position: absolute;
content: ' ';
top: 0;
bottom: 0;
left: 0;
right: 0;
background: white;
}
div:hover {
background: transparent;
}
<div></div>
You could place 2 divs on top of each other with different stroke types then transition them out.
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
}
div {
width: 11rem;
height: 11rem;
margin: auto;
background-color: #f2f2f2;
border: 5px #bbb solid;
border-radius: 2rem;
opacity: 1;
cursor: pointer;
}
.dotted {
border: 5px #bbb dotted;
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
z-index: 0;
}
.solid {
position: relative;
z-index: 1;
transition: opacity 1s;
}
.solid:hover {
opacity: 0;
}
<div class="solid"></div>
<div class="dotted"></div>
You can achieve this using pseudoelements. This version works even with transparent background. Added gradient to body to show this.
div {
position: relative;
/* just styles for demo */
width: 250px;
height: 250px;
border-width: 5px;
border-style: solid;
transition: 1s ease-in-out all;
border-radius: 10px;
}
div:after {
position: absolute;
content: ' ';
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
border-width: inherit;
border-style: dotted;
border-radius: inherit;
}
div, div:after {
border-color: tomato;
}
div:hover {
border-color: transparent;
}
/* just styles for demo showing that this will work even for transparent background */
body {
background-image: linear-gradient(to bottom, transparent, #ddd);
min-height: 100vh;
margin: 0;
}
<div></div>
It's not a soo elegant solution but it goes off of 'Niet the Dark Absol's' comment on my original question. Here is the code:
li {
font-family: 'Roboto', sans-serif;
font-size: 20px;
color: black;
position: relative;
border-bottom: 1px solid transparent; /* invisible border */
}
li:before, li:after {
content: '';
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
margin: -1px; /* same as border width */
transition: opacity 1s linear;
}
li:before {
border-bottom: 1px solid #000;
}
li:after {
border-bottom: 1px dotted #000;
opacity: 0;
}
li:hover:before {
opacity: 0;
}
li:hover:after {
opacity: 1;
}
I am trying to create a search icon that transforms into an input when hovered over. I am using the pseudo class ::after for the handle of the magnifying glass. Essentially, I want the handle to smoothly disappear when the icon is hovered over. Here is a link to my codepen.
body {
text-align: center;
}
#magnifying-glass {
display: flex;
justify-content: center;
height: 100px;
width: 100px;
border-radius: 100px;
border: 14px solid red;
margin: 0 auto;
margin-top: 200px;
transition: 1s;
}
#magnifying-glass::after {
content: "";
height: 50px;
width: 14px;
background-color: red;
transform: rotate(-45deg);
position: relative;
top: 85px;
left: 50px;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
input {
display: none;
border: none;
width: 70%;
font-size: 2.5em;
border-radius: 40px;
}
input:focus {
outline: none;
}
#magnifying-glass:hover {
width: 300px;
}
#magnifying-glass:hover #magnifying-glass::after {
width: 0px;
}
#magnifying-glass:hover input {
display: block;
}
<div id="magnifying-glass">
<input type="text" placeholder="Search">
</div>
Thanks so much!
If you want it to smoothly disappear and not so sharp change the transition times below to the following.
#magnifying-glass::after {
content: "";
height: 50px;
width: 14px;
border-radius: 10px;
background-color: red;
transform: rotate(-45deg);
position: absolute;
top: 88px;
left: 100px;
-webkit-transition: 2.5s;
-moz-transition: 2.5s;
-o-transition: 2.5s;
transition: 2.5s;
}
And to make it even smoother you can add:
#magnifying-glass:hover::after {
transform: rotate(360deg);
height: 0;
opacity: 0;
}
Heres a codepen with these changes. https://codepen.io/Ballard/pen/EgYLKG
Add an opacity: 0 to hover state
#magnifying-glass:hover::after {
transform: rotate(360deg);
height: 0;
opacity: 0;
}
DEMO: https://jsfiddle.net/2691pjod/3/
Snippet
body {
text-align: center;
background: #fff;
}
#magnifying-glass {
display: flex;
justify-content: center;
height: 100px;
width: 100px;
border-radius: 100px;
border: 14px solid red;
margin: 0 auto;
margin-top: 200px;
transition: 1s;
}
#magnifying-glass::after {
content: "";
height: 50px;
width: 14px;
border-radius: 10px;
background-color: red;
transform: rotate(-45deg);
position: relative;
top: 85px;
left: 50px;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
input {
display: none;
border: none;
width: 70%;
font-size: 2.5em;
border-radius: 40px;
}
input:focus {
outline: none;
}
#magnifying-glass:hover {
width: 300px;
}
#magnifying-glass:hover::after {
transform: rotate(360deg);
height: 0;
opacity: 0;
}
#magnifying-glass:hover input {
display: block;
}
<div id="magnifying-glass">
<input type="text" placeholder="Search">
</div>