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%.
Related
I am trying to add some animation for my CSS class
Here's code:
#primary_nav_wrap li a:hover:after {
height: 4px;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
background-color: #23a298;
bottom: 0;
content: "";
left: 0;
right:0;
margin-left:auto;
margin-right:auto;
position: absolute;
top: 96px;
width: calc(100% - 15px);
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
-o-transition: color 0.4s ease-out;
-ms-transition: color 0.4s ease-out;
transition: color 0.4s ease-out;
}
Everything is fine, but this part does not work:
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
-o-transition: color 0.4s ease-out;
-ms-transition: color 0.4s ease-out;
transition: color 0.4s ease-out;
Add this code to your a:after
#primary_nav_wrap li a:after {
height: 4px;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
bottom: 0;
content: "";
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 96px;
width: calc(100% - 15px);
-webkit-transition: background-color 0.4s ease-out;
-moz-transition: background-color 0.4s ease-out;
-o-transition: background-color 0.4s ease-out;
-ms-transition: background-color 0.4s ease-out;
transition: background-color 0.4s ease-out;
}
You don't put the transition effect on the hover, also, you didn't mention which style should get the transition so I gave it to the background-color
Example:
https://jsfiddle.net/7o2mw6ng/
Try placing the transition on the element without the hover applied:
#primary_nav_wrap li a:after {
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
-o-transition: color 0.4s ease-out;
-ms-transition: color 0.4s ease-out;
transition: color 0.4s ease-out;
}
Edit: You're changing the colour on the a tag so you need to apply the transition there.
#primary_nav_wrap ul a {
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
-o-transition: color 0.4s ease-out;
-ms-transition: color 0.4s ease-out;
transition: color 0.4s ease-out;
}
See jsfiddle here.
I am adding a class to an hr element that grows when it has this class. It is working nicely in chrome but not on firefox. I have inspected and it is adding the class so the css is not working.
Any ideas?
hr.portfolio-line {
width: 0px;
background-color: #fff;
border: none;
height: 2px;
z-index: 8;
position: relative;
}
hr.portfolio-line.grow {
-webkit-transition: width 1s ease-out;
-moz-transition: width 1s ease-out;
-o-transition: width 1s ease-out;
transition: width 1s ease-out;
width: 100px;
}
I have a button which is animated using :after and :hover:after CSS. Tried numerous ways to get it to work in IE but cannot find a work around. May be because the empty content:"", or the transition, but even without the transition is doesn't work. Any help / explanations is greatly appreciated.
button.bttnStyle1 {
background: none;
border: none;
font-size: 14rem;
text-transform: uppercase;
position: relative;
padding: 0rem;
cursor: pointer;
}
button.bttnStyle1:after,
button.bttnStyle1::after {
display: block;
position: absolute;
left: 0;
bottom: -5rem;
width: 3rem;
height: 3rem;
border-radius: 3rem;
content: "";
-o-transition: width 0.4s ease, height 2s ease-out;
-moz-transition: width 0.4s ease, height 2s ease-out;
-webkit-transition: width 0.4s ease, height 2s ease-out;
transition: width 0.4s ease, height 2s ease-out;
}
button.bttnStyle1:hover {}
button.bttnStyle1:hover:after,
button.bttnStyle1:hover::after {
width: 100%;
height: 2rem;
-o-transition: width 0.4s ease, height 2s ease-out;
-moz-transition: width 0.4s ease, height 2s ease-out;
-webkit-transition: width 0.4s ease, height 2s ease-out;
transition: width 0.4s ease, height 0.2s ease;
}
button.bttnStyle1:focus {
outline: none;
}
button.bttnColorGreen {
color: #69e0b1;
}
button.bttnColorGreen:after{
background-color:#69e0b1;
}
<button type="button" class="bttnStyle1 bttnColorGreen">BUTTON</button>
Codepen
Add overflow: visible; to your button. Found this solution here.
Solition:
CSS border radius need an actual border to be defined. Overflow also needed to be visible and everything works.
button.bttnStyle1:after,
button.bttnStyle1::after {
display: block;
position: absolute;
left: 0;
bottom: -5rem;
width: 0rem;
height: 0rem;
line-height:0;
border-radius:1rem;
content: "";
-o-transition: width 0.4s ease, height 2s ease-out;
-moz-transition: width 0.4s ease, height 2s ease-out;
-webkit-transition: width 0.4s ease, height 2s ease-out;
transition: width 0.4s ease, height 2s ease-out;
}
button.bttnColorGreen:after,
button.bttnColorGreen::after{
border:1rem solid #69e0b1;
background-color:#69e0b1;
}
I am editing a website template which has the following css for a button class.
.button {
-moz-appearance: none;
-webkit-appearance: none;
-o-appearance: none;
-ms-appearance: none;
appearance: none;
-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
background-color: transparent;
border-radius: 0.35em;
border: solid 3px #efefef;
color: #787878 !important;
cursor: pointer;
display: inline-block;
font-weight: 400;
height: 6.15em;
height: calc(2.75em + 6px);
line-height: 2.75em;
min-width: 20em;
padding: 0 1.5em;
text-align: center;
text-decoration: none;
white-space: nowrap;
margin:10px;
}
I am trying to increase the font within. Tried playing around with the values of line-height and height but wasn't able to increase the font size. Any ideas?
try font-size:__px whatever pixel value it is
I just added font-size property to CSS. It worked. Pretty Basic :P
All you need to do is utilize the CSS font-size property:
#yourdiv{
font-size:20px;
}
Add this:
size: 20px;
or:
font-size: 20px;
I've been trying to mess around with my MAL CSS (myanimelist) to my liking. I've encountered this weird behavior in webkit browsers like chrome and opera where an extra space is left when I reposition a td element.
This is what I'm getting:
I made a jsfiddle for the project, where I basically copy pasted some html code from my anime list and slapped in my CSS code.
http://jsfiddle.net/qwwtt/1/
So what I exactly did was I removed a td element from where it's supposed to be, then repositioned it and added position:fixed and display:block so I could freely move it around. Now the thing is, it leaves a space on it's table location when viewed with Chrome or Opera. Here's the CSS code of the table rows and cells. (td:nth-of-type(6) is the one I repositioned)
tr [class^=td] {
background-color: rgba(64,64,64,0);
border-top: 1px solid rgba(255,255,255,0);
border-bottom: 1px solid rgba(255,255,255,0);
-webkit-transition: background-color 2s ease, border-color 1s ease;
-moz-transition: background-color 2s ease, border-color 1s ease;
-o-transition: background-color 2s ease, border-color 1s ease;
transition: background-color 2s ease, border-color 1s ease;
}
tr:hover [class^=td] {
background-color: rgba(255,255,255,0.25);
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(255,255,255,0.5);
-webkit-transition: background-color 0.25s ease, border-color 0.25s ease;
-moz-transition: background-color 0.25s ease, border-color 0.25s ease;
-o-transition: background-color 0.25s ease, border-color 0.25s ease;
transition: background-color 0.25s ease, border-color 0.25s ease;
}
tr td[class^=td] {
padding: 5px 0;
}
/**
*
* Per-column CSS
*
**/
tr td:nth-of-type(1)[class^=td], tr td:nth-of-type(1)[class=table_header] {
width: 4%;
min-width: 35px;
max-width: 100px;
text-align: right;
padding-right: 5px;
}
tr td:nth-of-type(2)[class^=td], tr td:nth-of-type(2)[class=table_header] {
min-width: 400px;
text-align: center;
}
tr td:nth-of-type(3)[class^=td], tr td:nth-of-type(3)[class=table_header],
tr td:nth-of-type(4)[class^=td], tr td:nth-of-type(4)[class=table_header],
tr td:nth-of-type(5)[class^=td], tr td:nth-of-type(5)[class=table_header],
tr td:nth-of-type(7)[class^=td], tr td:nth-of-type(7)[class=table_header],
tr td:nth-of-type(8)[class^=td], tr td:nth-of-type(8)[class=table_header],
tr td:nth-of-type(9)[class^=td], tr td:nth-of-type(9)[class=table_header],
tr td:nth-of-type(10)[class^=td], tr td:nth-of-type(10)[class=table_header] {
width: 8%;
min-width: 75px;
}
tr td:nth-of-type(6)[class^=td], tr td:nth-of-type(6)[class=table_header] {
-webkit-backface-visibility: hidden;
pointer-events: none;
position: fixed;
bottom: 10px;
left: 2%;
width: 40%;
opacity: 0;
-webkit-transform: translate(0px,50px);
-moz-transform: translate(0px,50px);
-ms-transform: translate(0px,50px);
transform: translate(0px,50px);
-moz-transition: 1s ease-out;
-webkit-transition: 1s ease-out;
-o-transition: 1s ease-out;
transition: 1s ease-out;
padding: 5px 5px;
background-color: #000;
border: 2px solid rgba(255,255,255,0.75);
border-radius: 5px;
box-shadow: 0 0 5px rgba(255,255,255,0.5);
text-align: justify;
}
tr:hover td:nth-of-type(6)[class^=td] {
opacity: 1;
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
transform: translate(0px,0px);
-moz-transition: 0.25s ease-out 0.25s;
-webkit-transition: 0.25s ease-out 0.25s;
-o-transition: 0.25s ease-out 0.25s;
transition: 0.25s ease-out 0.25s;
}