I'm working to build a button styling where when the user hovers over a button, the button moves up 2 pixels. I have that working with the following on hover:
`transform: translateY(-2px);`
The problem is, if you move your mouse right under the button, the button starts to move but and the button now bounces/jumps from normal to active causing button jumpies.
Any idea on how I can implement the button moving up 2 pixels on hover but without the jumpies when the mouse is near the edge of the button?
.ui.button {
outline: none;
height: 48px;
font-weight: 500;
font-size: 17px;
line-height: 20px;
padding-top: 12.5px;
padding-bottom: 12.5px;
color: #fff;
background: green;
border: 1.5px solid darkGreen;
box-shadow: 0 2px rgba(6,164,105,.25);
transition: transform .1s ease-in-out,box-shadow .1s ease-in-out,-webkit-transform .1s ease-in-out,-webkit-box-shadow .1s ease-in-out;
}
.ui.primary.button:hover {
transform: translateY(-2px);
background: green;
border-color: darkGreen;
box-shadow: 0 4px rgba(6,164,105,.25);
}
<button class="ui medium primary button button-icon-with-text " role="button" style="margin-bottom: 0px;">Primary Button</button>
Similarly to Temani Afif's anwser, I would use a pseudo-element that's 2px longer than the element, but switching the overflow from hidden to visible on hover.
.ui.button {
position:relative; overflow:hidden;
outline: none;
height: 48px;
font-weight: 500;
font-size: 17px;
line-height: 20px;
padding-top: 12.5px;
padding-bottom: 12.5px;
color: #fff;
background: green;
border: 1.5px solid darkGreen;
box-shadow: 0 2px rgba(6,164,105,.25);
transition: transform .1s ease-in-out,box-shadow .1s ease-in-out,-webkit-transform .1s ease-in-out,-webkit-box-shadow .1s ease-in-out;
}
.ui.primary.button::after{
content:"";
position:absolute;
top:0; left:0;
width:100%;
height:calc(100% + 3.5px); /* translate + bottom border height*/
}
.ui.primary.button:hover {
overflow:visible;
transform: translateY(-2px);
background: green;
border-color: darkGreen;
box-shadow: 0 4px rgba(6,164,105,.25);
}
<button class="ui medium primary button button-icon-with-text " role="button" style="margin-bottom: 0px;">Primary Button</button>
An idea is to use a pseudo-element that will cover the space under button after the translation and you will avoid this effect. So it's like you simply increase the total height of your element instead of translating it.
.ui.button {
position:relative;
outline: none;
height: 48px;
font-weight: 500;
font-size: 17px;
line-height: 20px;
padding-top: 12.5px;
padding-bottom: 12.5px;
color: #fff;
background: green;
border: 1.5px solid darkGreen;
box-shadow: 0 2px rgba(6,164,105,.25);
transition: transform .1s ease-in-out,box-shadow .1s ease-in-out,-webkit-transform .1s ease-in-out,-webkit-box-shadow .1s ease-in-out;
}
.ui.button:after {
content:"";
position:absolute;
bottom:0;
right:0;
left:0;
height:0;
}
.ui.primary.button:hover {
transform: translateY(-2px);
background: green;
border-color: darkGreen;
box-shadow: 0 4px rgba(6,164,105,.25);
}
.ui.primary.button:hover:after {
content:"";
height:2px;
bottom:-3.5px; /* Don't forget the border !*/
}
<button class="ui medium primary button button-icon-with-text " role="button" style="margin-bottom: 0px;">Primary Button</button>
Another idea is to use a container for the button on where you apply the hover. This will work with any value of transalation and you avoid doing calculation to find the values of the pseudo-element:
.ui.button {
position: relative;
outline: none;
height: 48px;
font-weight: 500;
font-size: 17px;
line-height: 20px;
padding-top: 12.5px;
padding-bottom: 12.5px;
color: #fff;
background: green;
border: 1.5px solid darkGreen;
box-shadow: 0 2px rgba(6, 164, 105, .25);
transition: transform .1s ease-in-out, box-shadow .1s ease-in-out, -webkit-transform .1s ease-in-out, -webkit-box-shadow .1s ease-in-out;
}
.contain {
display: inline-block;
}
.contain:hover .ui.primary.button {
transform: translateY(-2px);
background: green;
border-color: darkGreen;
box-shadow: 0 4px rgba(6, 164, 105, .25);
}
<div class="contain">
<button class="ui medium primary button button-icon-with-text " role="button" style="margin-bottom: 0px;">Primary Button</button>
</div>
Related
I have a button which has some text and a font awesome icon that rotates 90 degrees in 0.5s and changes color when hovered. What I'm trying to accomplish is when the user unhovers the button it should take 0.5s to rotate from 90 degrees back to 0 degrees instead of immediately. I would like a smooth transition back to the original state instead of instant on unhover.
Codepen
Click Me <i class='fas fa-arrow-right' ></i>
.my-button {
text-decoration: none;
color: black;
padding: .2rem;
border: 2px solid black;
transition: all 0.5s ease-in;
&:hover {
background-color: blue;
color: white;
border: 2px solid red;
}
&:hover .fas.fa-arrow-right {
transform: rotate(90deg);
transition: transform 0.5s ease 0s;
}
}
you didn't specify the target i:
try this
.my-button {
text-decoration: none;
color: black;
padding: .2rem;
border: 2px solid black;
transition: all 0.5s ease-in-out;
& i{
transition: all 0.5s ease-in-out;
}
&:hover {
background-color: blue;
color: white;
border: 2px solid red;
}
&:hover .fas.fa-arrow-right {
transform: rotate(90deg);
}
}
I've a WhatsApp share button but I'm facing some issue with it. sharing function works well but the problem is that when the page loads(or while leaving the page), the background color of the button is displayed on the entire page for a short period of time which looks ugly. Can somebody help me to fix it? What should I change in this code so that the original theme color will be displayed while page loading instead of this WhatsApp button's color? Thanks in advance.
<style>
body{background-color:#49C34F}
.mct_whatsapp_btn {
background: #11A518;
color: white;
font-size: 16px;
padding: 6px 9px 6px 28px;
border-radius: 2px;
position: relative;
transition: ease-in all 0.3s;
moz-transition: ease-in all 0.3s;
-o-transition:ease-in all 0.3s;
-webkit-transition: ease-in all 0.3s;
text-decoration: none;
box-shadow: inset 3px 1px 1px rgba(17, 165, 24, 0.25);
border: 1px solid #028408;
}
.mct_whatsapp_btn:before {
content: '';
background: url(BACKGROUND IMAGE URL);
position:absolute;
top: 6px;
left: 7px;
width:16px;
transition: ease-in all 0.3s;
moz-transition: ease-in all 0.3s;
-o-transition:ease-in all 0.3s;
-webkit-transition: ease-in all 0.3s;
height:16px;
}
.mct_whatsapp_btn:hover {
background: #028408;
text-decoration: none;
color:white;
border: 1px solid #11A518;
box-shadow: inset 3px 1px 1px rgba(2, 132, 8, 0.25);
}
.mct_whatsapp_btn:hover:before {
transform: rotate(360deg);
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 well">
<a class="mct_whatsapp_btn" data-link="" data-text="" href="whatsapp://send?text=">Share</a>
</div>
Remove the first block of code body{background-color:#49C34F}
Can someone help me figure out how to create this button with html and css only? Did try something with afters and border-radious, but with no succes. Thanks in advance!
.button {
border-top-left-radius: 30px 74px;
border-top-right-radius: 20px 11rem;
border-bottom-left-radius: 75px 23px;
border-bottom-right-radius: 20px 215px;
background-color: rgb(28, 24, 59);
color: rgb(255, 255, 255);
font-weight: 700;
text-transform: uppercase;
position: relative;
display: inline-block;
padding: 1rem 2rem;
line-height:2;
text-decoration:none;
font-family:'Helvetica Neue'
}
.button:after{
background: #1c183b;
content: "";
height: 48px;
margin-top: -1.5em;
position: absolute;
right: -1.3em;
top: 50%;
width: 48px;
z-index: -1;
transform: rotate(45deg);
border-radius: .4em;
-webkit-transition: .3s all ease-in-out;
-moz-transition: .3s all ease-in-out;
-ms-transition: .3s all ease-in-out;
-o-transition: .3s all ease-in-out;
transition: .3s all ease-in-out;
}
Shitty button
Try this.
.mybtn{
background:#25214C;
color:#FFF;
border-radius:5px 25px 25px 5px;
padding:15px;
border-top:none;
border-left:none;
border-right:none;
border-bottom:5px solid #CCC;
}
<button type="button" class="mybtn">More Information</button>
My transition outs are not working, I am using the latest Chrome Browser and when I hover over the button, the transition in is working, however the transition out just cuts right off.
My CSS
.btn{
border-radius: 5px;
padding: 15px 25px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
}
.btn:active{
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 0px 0px 0px;
}
.blue{
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
}
.blue:hover{
background-color: #6FC6FF;
transition-duration: .02s;
display: inline-block;
}
}
HTML is on this JSFiddle.
You need to put the transition on the base state not the :hover then it will transition between all states.
.blue {
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
transition: background-color 0.2s ease-out;
}
.btn {
border-radius: 5px;
padding: 15px 25px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
}
.btn:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 0px 0px 0px;
}
.blue {
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
transition: background-color 0.2s ease-out;
}
.blue:hover {
background-color: #6FC6FF;
display: inline-block;
}
<div id="buttons"> Blu
</div>
You are adding a transition to the :hover state, not to the actual element.
It's usually better to define a transition on the element itself, and then change properties to it's states, this way it understands that whatever the state change, it should transition from one to the other.
.btn{
transition: background-color 0.2s ease-out;
}
.btn:active{
...
}
.btn:hover{
...
}
Your just need to insert this on your btn main class
.btn{
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
Demo
.common_button:active
{
box-shadow: 0px 3px 3px -2px #777;
padding: 3px;
width:80px;
}
.common_button_container
{
border: 1px solid;
width: 100px;
padding: 7px;
}
I am trying to create button-pressing effects. But I don't want this effect to affect it's container. i want to have only width and height reduced on button while pressing but not for the container. Any idea?
You could just hard set the height of the .common_button_container by adding height: 30px; to it.
If the size of the container is not specified, use this:
.common_button_placeholder
{
background-color: transparent;
color: transparent;
}
.common_button
{
position: absolute;
}
.common_button:active
{
box-shadow: 0px 3px 3px -2px #777;
padding: 3px;
width:80px;
}
.common_button_container
{
border: 1px solid;
width: 100px;
padding: 7px;
}
<div class="common_button_container">
<div class="common_button">Submit</div>
<div class="common_button_placeholder">Submit</div>
</div>
The common_button is set to absolute; common_button_placeholder not. So common_button_placeholder is behind the orginal, it set the size of the container, but common_button has no further effect to it.Just for the styling, how about using transition:
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;