I'm making a simple button with a CSS underline ease transition. All other ease transitions are working fine (hover, ease in, un-hover, ease out), but border-bottom will not ease out. When you quit hovering, it simply reverts back to normal without easing out.
Here is a code-pen with a quick button I made to illustrate the problem.
https://codepen.io/anon/pen/jwgpdv
Here is my CSS:
.gbtn {
background: #bba989;
text-align: center;
line-height: 150px;
height: 150px;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
display: inline-block;
transition: all .25s ease;
box-sizing: border-box;
font-family: "montserrat", serif;
padding: 0px 30px;
}
.gbtn:hover {
background-color: #aa9470;
border-bottom: 150px solid #242424;
}
You didn't define a border before hover, how is the browser supposed to know how to transition out?
Add this:
.gbtn {
border-bottom: 0 solid #242424;
}
Related
I need to set css of button like this website, where you can see the Read more button with Dark color and half shadow
Please see the following image:
I tried below code, but I failed:
.rmbutton {
color: #ffffff !important;
background: #504d62 !important;
position: relative;
overflow: hidden;
padding: 13px 35px;
text-transform: uppercase;
display: inline-block;
font-size: 14px;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0s;
text-align: center;
font-weight: bold;
}
Thanks in advance!
Simple background, You should fiddle with the values to your liking.
button {
color: white;
padding: 40px 80px;
background: linear-gradient(100deg, red 25%, blue 26%);
}
<button>Don't click me</button>
I could really use some help in my css code.
I'm trying to make my <h1> change color and shape using the transition property.
I want the shape and color to change slowly while I hover over the headline,
but currently only the color is affected, and the shape changes independently.
my code is as follows :
html :
<h1 class="box">Abcdefg</h1>
css :
.box {
background: #2db34a;
margin: 1px auto;
transition: background 1s linear;
border-radius: 0.3%;
color: white;
cursor: pointer;
height: 95px;
line-height: 95px;
text-align: center;
width: 400px;
}
.box:hover {
background: #ff7b29;
border-radius: 50%;
}
thanks.
You just need to add border-radius to your transition
.box {
background: #2db34a;
margin: 1px auto;
transition: background 1s linear, border-radius 1s linear;
border-radius: 0.3%;
color: white;
cursor: pointer;
height: 95px;
line-height: 95px;
text-align: center;
width: 400px;
}
.box:hover {
background: #ff7b29;
border-radius: 50%;
}
<h1 class="box">Abcdefg</h1>
You have the next line of code:
transition: background 1s linear;
The transition only works on the background right now. If you change background to all the transition will work on both background and border-radius, like this:
transition: all 1s linear;
Use all in the transition setting to affect both the border-radius and the background-color:
.box {
background: #2db34a;
margin: 1px auto;
transition: all 1s linear;
border-radius: 0.3%;
color: white;
cursor: pointer;
height: 95px;
line-height: 95px;
text-align: center;
width: 400px;
}
.box:hover {
background: #ff7b29;
border-radius: 50%;
}
<h1 class="box">Abcdefg</h1>
Transitions work only on properties that have numbers. That being said, the question is it should work for the border-radius as well. But the problem here is the browser is unable to find the initial state of the property. Just add border-radius: 0% and it should work.
HTML code:
<p> the code is :</p>
<h1 class="sheet">Abcdefg</h1>
CSS Code:
css code :
.sheet {
background: blue;
margin: 1px auto;
transition: background 5s linear , border-radius 5s ease-in-out ;
color: white;
cursor: pointer;
height: 95px;
line-height: 95px;
text-align: center;
width: 400px;
}
.sheet:hover {
background: red;
color:grey;
border-radius: 40%;
}
I am creating a jobs page and was just making this when I ran across what I think is a styling problem.
If you look at the image below you can see the Apply button comes before the time and city but I want the Apply button to be farthest to the left but it will not position that way which only led me to believe this is a styling error on my part. Does anybody know why this would be? Code posted below.
HTML
<div class="job-case">
<h4>iOS Engineer</h4>
<span>Chicago</span>
Apply
</div>
CSS
.job-case {
height: 0 auto;
width: 0 auto;
background-color: white;
margin: 10px;
padding: 0 auto;
border-radius: 5px;
border: 1px solid none;;
}
.job-case:hover {
background-color: #F3EFF5;
border-color: #212121;
}
.job-case h4 {
color: #212121;
font-weight: bold;
font-size: 20px;
display: inline-block;
padding-left: 30px;
}
.job-case a {
float: right;
height: 0 auto;
margin-top: 17px;
padding: 10px;
color: #72b01d;
background-color: none;
border: 2px solid #72b01d;
border-radius: 5px;
}
.job-case a:hover {
background-color: #72b01d;
border-color: #72b01d;
color: white;
-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;
}
.job-case span {
float: right;
padding: 30px;
font-weight: bold;
font-size: 15px;
color: #212121;
}
It is not a styling issue. When using float:right on siblings they stack and they go to the right in the order they are in the DOM. so the first one with float:right will go to the farthest right.
So you need to change the html and put the a before the span
<div class="job-case">
<h4>iOS Engineer</h4>
Apply
<span>Chicago</span>
</div>
Demo at https://jsfiddle.net/g8kuve66/
Quoting the float specification
A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there is a line box, the outer top of the floated box is aligned with the top of the current line box.
In this Fiddle (html+css) you can see that if you mouseover the "link" both, font and background, slowly rea-animates but if you mouseout ONLY the font re-animates again. The background just fast blink back to
a {background:}
How do I force the background to animate even on mouseout?
You had your transition for the background only on the hover. That means that if the user isn't hovering the transition isn't executed. By giving #dolu a transition: 5s instead of transition: color 5s it is fixed.
updated fiddle
Full CSS:
body {background: red; }
#dolu {
position: absolute;
bottom: 5px; text-align:
center; width: 100%;
}
#dolu a:hover {
color: white;
background: rgb(31, 31, 31);
}
#dolu a {
color: black;
background: white;
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
font-variant: normal;
text-decoration: none;
padding: 10 20 6 20;
transition: 5s;
}
I want the whole div to change from #555555 to #b13c19. It's a simple rounded corner div wrapped around a link. I cant seem to get it right. Here is what I have so far. Any help would be much appreciated.
HTML
<div id="resume_btn">
Click Here to View My Resume
</div>
CSS
#resume_btn {
position: relative;
margin-top: 25px;
padding: 20px;
width: 220px;
height: 25px;
background-color: #555555;
background-repeat: no-repeat;
text-align:center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-0-border-radius: 10px;
border-radius: 10px;
}
#resume_btn a {
text-decoration: none;
color:white;
font-family: 'oswald', helvetica, arial, sans-serif;
font-size: 18px;
font-weight: 300;
}
I'm not sure where to put the -moz-transition: background 1s ease-in; etc. properties. I want the background to change color when I hover over the link. I made it work for the background color of the link but it doesn't look good because the background only encompasses the wording and not the whole 230 x 25 area.
#resume_btn {
position: relative;
margin-top: 25px;
width: 320px;
background-color: #555555;
background-repeat: no-repeat;
text-align:center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-0-border-radius: 10px;
border-radius: 10px;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-ms-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}
#resume_btn:hover {
background: #b13c19;
}
#resume_btn a {
text-decoration: none;
display: block;
color: white;
font: 300 18px 'oswald', helvetica, arial, sans-serif;
padding: 20px;
}
<div id="resume_btn">
Click Here to View My Resume
</div>