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>
So, I've taken over an internal project and the previous build had issues regarding the styling of check boxes. I have fixed the issue in Chrome which is fine for us as its the only installed browser here but when this goes live some modules will be available to customers which is where things get sticky. This is the code I am using to style the check boxes in Chrome:
input[type=checkbox] {
border-radius: 2px;
cursor: pointer;
margin-top: 1px;
border: 1px solid #gray;
background-color: white;
color: white;
white-space: nowrap;
overflow: hidden;
width: 20px;
height: 20px;
}
input[type=checkbox]:checked {
background-color: #3FAE2A;
border: 1px solid #3FAE2A;
}
input[type=checkbox] :hover {
border: 1px solid #3FAE2A;
-moz-transition: border-color 0.1s ease-out;
-o-transition: border-color 0.1s ease-out;
-webkit-transition: border-color 0.1s ease-out;
transition: border-color 0.1s ease-out;
}
Now currently this works in the sense that the check boxes are functional across all browsers but only styled in Chrome, is there any way for me to just use css to get this to work across IE and Firefox? If not, where should I be looking?
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've got some buttons that have a CSS transition from black to yellow on hover, then return back to black. When clicked they make an AJAX call. They work nicely when I hover over them and click a mouse on all desktop browsers (naturally IE9 and lower ignore it), but on both iOS Safari, and the standard Android browser, the transition stays yellow after I have clicked the button. They do not return to the normal black state, like they do on a desktop system.
Any clues as to where I've gone wrong would be greatly appreciated. For those with a touch device, this Fiddle demonstrates the problem - http://jsfiddle.net/wpyz9whn/1/
CSS
a.button {
background-color: #000000;
color: #FFFFFF;
border: none;
text-decoration: none;
padding: 0px 10px;
display: block;
line-height: 24px;
font-weight: 700;
text-align: center;
transition: background 0.8s ease-out;
-moz-transition: background 0.8s ease-out;
-webkit-transition: background 0.8s ease-out;
text-transform: uppercase;
-webkit-appearance: none;
}
a.button:hover {
background: #ffcc00;
color: #000;
transition: background 0.2s ease-in;
-moz-transition: background 0.2s ease-in;
-webkit-transition: background 0.2s ease-in;
}
a.button:active {
background: #ff9c00;
transition: background 0s ease-in;
-moz-transition: background 0s ease-in;
-webkit-transition: background 0s ease-in;
}
a.button:focus {
outline: none;
}
HTML
<a class="button" onclick="return addToBasket(11628937,'/')">Add to Basket</a>
I have the following CSS / HTML code:
CSS:
#buttons a {
margin: 0 30px;
display: inline-block;
position: relative;
padding: 9px 3px;
-webkit-transition: background 500ms ease-in-out;
-moz-transition: background 500ms ease-in-out;
-ms-transition: background 500ms ease-in-out;
-o-transition: background 500ms ease-in-out;
transition: background 500ms ease-in-out;
}
#buttons a span{
background: #242424;
font-size: 1.7em;
color: #fffae6;
border: 1px solid #fff;
outline: 4px solid #242424;
position: relative;
width: 100%;
height: 100%;
padding: 5px 40px;
-webkit-transition: background 500ms ease-in-out;
-moz-transition: background 500ms ease-in-out;
-ms-transition: background 500ms ease-in-out;
-o-transition: background 500ms ease-in-out;
transition: background 500ms ease-in-out;
}
HTML:
<a class="restaurant_book_button" href="/book"><span>Book Online</span></a>
How it renders in Safari:
How it renders in Chrome:
Any ideas what could be causing this?
Try box-sizing with -webkit prefix in span because you are using padding while your span width is 100%.