I have a transition on my anchors and every time I refresh the page, it just resets to default state of the anchor, and then it goes to the state I pre-defined with CSS.
When I put the transition into :hover it doesn't do this, but then I won't get a transition when I stop hovering over it.
.button1 {
display: inline-block;
padding: 0.5em 3em;
border: 0.16em solid #DDDDDD;
border-radius: 50px;
margin: 0 0.3em;
box-sizing: border-box;
text-transform: uppercase;
font-weight: 400;
color: #DDDDDD;
text-align: center;
font-size: 40px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.button1:hover {
color: #FFB5B5;
border-color: #FFB5B5;
border-radius: 20px;
}
.buttons {
text-align: center;
}
<div class="buttons">
div
flex-box
</div>
Related
I'm experiencing a firefox specific bug with a simple menu I've built
It's a ul-list that has an on-hover effect for the list items, the list items have transform:translateX(12px) applied on hover, and the text links have a negative indent applied at all times, the combination of the two create a Firefox specific bug where part of the text disappears on hover during its animation, looks like its basically being hidden by its own padding because of the negative value.
Here is a JS Fiddle as well as the code, am I missing -moz- css?
https://jsfiddle.net/CultureInspired/9435v0vy/1/
<ul class="menu_desktop">
<li>Home</li>
<li>About</li>
<li>Press</li>
<li>Contact</li>
</ul>
CSS:
.menu_desktop {
list-style-type: none;
margin: 80px;
padding: 0;
}
.menu_desktop li {
background: #fff;
margin-bottom: 10px;
text-indent: -.8em;
text-transform: uppercase;
letter-spacing: 6px;
display: table;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.menu_desktop li:hover {
transform: translateX(12px);
}
.menu_desktop a {
color: #000;
height: 100%;
padding: 8px;
display: block;
text-decoration:none;
}
I've got the same issue with firefox 49.0.2, it seems like a bug.
You can solve this by using margin-left: 12px; instead of the transform you are currently using.
Here is the fix (works in firefox, chrome & ie):
body {
background: lightgray;
}
.menu_desktop {
list-style-type: none;
margin: 80px;
padding: 0;
}
.menu_desktop li {
background: #fff;
margin-bottom: 10px;
text-indent: -.8em;
text-transform: uppercase;
letter-spacing: 6px;
display: table;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.menu_desktop li:hover {
margin-left: 12px;
}
.menu_desktop a {
color: #000;
height: 100%;
padding: 8px;
display: block;
text-decoration:none;
}
<ul class="menu_desktop">
<li>Home</li>
<li>About</li>
<li>Press</li>
<li>Contact</li>
</ul>
I am new to CSS. I have the following style for a tag button. How to reduce the height of the button? I tried changing it but it didn't help.
My code:
.tag-btn {
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
cursor: pointer;
z-index: 5;
position: relative;
padding: 10px;
line-height: 13px;
margin: 0;
height: 40px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #F08080;
border: none;
color: #fff;
box-shadow: none;
}
Could anyone help me on this? Thanks.
Remove height completely and try adjusting line-height
.tag-btn {
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
cursor: pointer;
z-index: 5;
position: relative;
padding: 10px;
margin: 0;
line-height: 5px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #F08080;
border: none;
color: #fff;
box-shadow: none;
}
DEMO
Reduce your height as well as padding and remove the line height.
.tag-btn {
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
cursor: pointer;
z-index: 5;
position: relative;
padding:3px;
margin: 0;
height: 20px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #F08080;
border: none;
color: #fff;
box-shadow: none;
}
DEMO
You can adjust the line-height and height
CSS
.tag-btn {
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
cursor: pointer;
z-index: 5;
position: relative;
padding: 10px;
line-height: 0px;
margin: 0;
height: 22px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #F08080;
border: none;
color: #fff;
box-shadow: none;
}
DEMO HERE
Reduce the padding and line-height to decrease the height
Also read about the box model in css to understand more
https://css-tricks.com/the-css-box-model/
your .tag-btn is an inline-element,your can change the padding or line-height to change the height of btn,if your want to change the height directly, you can change the element to inline-block
.tag-btn {
padding: 5px 10px; //your code is 10px
}
Decrease "padding" css property. Make it one pixel and try.
padding: 1px;
your .tag-btn is an inline-element
your can change the padding
your can change the line-height
you can change the element to inline-block, if your want to change the height directly
every way will work for you
You need to remove line-height and padding from your CSS. Thereafter, you can manipulate the height.
I can never get my CSS transitions to work on mouse out/off hover. It works fine on hover but not the other way around.
.btn {
border: 1px solid #5a5350;
background: #FFF;
color: inherit !important;
padding: 3px 10px;
display: inline-block;
font-weight: bold;
text-transform: uppercase;
-webkit-transition: background 0.5s ease-in-out;
-moz-transition: background 0.5s ease-in-out;
-o-transition: background 0.5s ease-in-out;
transition: background 0.5s ease-in-out;
}
.btn:hover {
color: #FFF !important;
background: #f79e43;
border: 1px solid #f79e43;
}
What's the problem with my code?
Thanks
I'm trying to make a menu with definitions on the left and links on the right - but I can't get all the box to be a link. I could solve it with table I guess, but I hope there is a smoother solution.
So I want to float left one side of the line and right the other.
Here's my CSS:
li {
margin: 0px 10px 0px 100px;
padding: 30px 5px 0px 5px;
border-bottom: 2px solid black;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
display: block;
-moz-transition: background-color .3s ease-in;
-webkit-transition: background-color .3s ease-in;
-o-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
li:hover {
background-color: #CCC;
-moz-transition: background-color 0.01s;
-webkit-transition: background-color 0.01s;
-o-transition: background-color 0.01s;
transition: background-color 0.01s;
}
a {
float: right;
color: black;
text-decoration: none;
}
And the HTML:
<ul>
<li>Blog#.blogspot.com</li>
<li>Twitter##</li>
<li>Google+Google+</li>
<li>Contact me##gmail.com</li>
</ul>
Or much better, here: http://jsfiddle.net/hJRdN/
It is done here on jsfiddle
just replace html and css as in js fiddle
<ul>
<li>Blog<span>#.blogspot.com</span></li>
<li><span>Twitter</span>##</li>
<li>Google+<span>Google+</span></li>
<li>Contact me<span>##gmail.com</span></li>
</ul>
CSS
li {
float:left;
width:400px;
margin: 0px 10px 0px 100px;
border-bottom: 2px solid black;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
display: block;
-moz-transition: background-color .3s ease-in;
-webkit-transition: background-color .3s ease-in;
-o-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
li:hover {
background-color: #CCC;
-moz-transition: background-color 0.01s;
-webkit-transition: background-color 0.01s;
-o-transition: background-color 0.01s;
transition: background-color 0.01s;
}
a {
display:block;
padding: 30px 5px 0px 5px;
color: black;
text-decoration: none;
width:390px;
}
a span{ float:right}
Is it necesary to have unordered list? If not you could easily achieve that with just using floated divs.
<a href="#">
<div class="row">
<div class="left">blog</div><div class="right">blogspot.com</div>
</div>
</a>
<a href="#">
<div class="row">
<div class="left">twitter</div><div class="right">twitter.com</div>
</div>
</a>
And css:
.row { width: 100%; float: left; }
.row:hover { background-color: #e3e3e3; }
.left { float: left; }
.right { float: right; }
.row .left { color: #000; }
.row .right { color: #000; }
Check out this fiddle: http://jsfiddle.net/dejvidpi/7a6mp/
have four items that just show a bg image until you hove and then it displays text, bg image is then set to none.
The first element is expanding beyond the height of the other three. I really just wanted them all to stay at 200x200px. All the images used for backgrounds are 200x200px.
Should the .p1top be positioned differently such as absolute?
.p1top {
height:200px;
margin-left:45px;
background-repeat: no-repeat;
background-image: url(protect.png);
width:200px;
text-align:center;
background-color:transparent;
line-height: 0px;
color: transparent;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.p1top :hover {
height:200px !important;
width:200px;
background-image:none;
background-color:#7D8093;
line-height: 20px;
color: #FFFFFF;
}
.p2top :hover {
width:200px;
background-image:none;
background-color:#7D8093;
line-height: 20px;
color: #FFFFFF;
}
.p2top {
background-repeat: no-repeat;
background-image: url(build.png);
float:left;
margin-left:-15px;
width:200px;
text-align:center;
background-color:transparent;
line-height: 0px;
color: transparent;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
/*.p2top :hover {width:200px; background-color:#7D8093;line-height: 20px; color: #FFFFFF; }*/
.p3top {
background-repeat: no-repeat;
background-image: url(savebg.png);
margin-left: -20px;
width:200px;
text-align:center;
background-color:transparent;
line-height: 0px;
color: transparent;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.p3top :hover {
width:200px;
background-color:#7D8093;
line-height: 20px;
color: #FFFFFF;
}
.p4top {
background-repeat: no-repeat;
background-image: url(help.png);
margin-left: -20px;
width:200px;
text-align:center;
background-color:transparent;
line-height: 0px;
color: transparent;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.p4top :hover {
width:200px;
background-color:#7D8093;
line-height: 20px;
color: #FFFFFF;
}
You have defined the height only in .p1top but not in other divs, so you need to set that's div height also. Then you could define position such as absolute but for this you should wrap all of these div with a div positioned relatively. If you post a jsfiddle that would be very much sensible.