I have a problem with losing opacity of my form in Mozzilla:
What is more in Chrome everything is great:
Do exist some tolls for set my CSS3 code to each browser? it would be great when it would add additional lines with -o- -moz- ect. prefixes.
My code is nothing special...
.input2
{
transition: all 300ms ease;
width: 240px;
height: 45px;
margin: 0 auto;
margin-top: 10px;
margin-left: 80px;
border-width: 0;
background-color: white;
border-bottom-width: 3px;
border-color: #CCCA14;
text-indent: 20px;
font-family: 'Titillium Web', sans-serif;
color: #232227;
font-size: 16px;
}
Try now it works, Border style was not defined and that's why it was not working Firefox.
You can either define it in one line or in multiple lines i.e. property of border as below,
.input2{
border-bottom : 2px solid #CCCA14;
}
or
.input2{
border-bottom-width : 2px;
border-color : #CCCA14;
border-style : solid;
}
.input2
{
transition: all 300ms ease;
width: 240px;
height: 45px;
margin: 0 auto;
margin-top: 10px;
margin-left: 80px;
border-width: 0;
background-color: white;
border-bottom: 3px solid #CCCA14;
text-indent: 20px;
font-family: 'Titillium Web', sans-serif;
color: #232227;
font-size: 16px;
outline:none;
}
<input type="text" class="input2">
Related
This is an insanely basic question but for the life of me I can't figure it out. I'm creating a button class and no matter what I do, there's extra space to the bottom and right of the text.
Tried altering line-height, border-box, margins, display, text-align and some others.
.button {
font-family: 'helvetica';
font-size: 16px;
color: #000;
margin: 0px;
position: relative;
letter-spacing: .4em;
text-transform: uppercase;
text-decoration: none;
color: $secondary-color;
border: 4px solid #000;
padding: .3em .75em;
margin: 0px;
text-align: center;
display: inline-block;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
}
.button:hover {
color: #fff;
background-color: #000;
}
project
Just trying to get an evenly padded button that will resize to the text content.
this is happening because of letter-spacing:0.4em on your last letter to remove this wrap last letter in span with letter-spacing:0 like this:
.button {
font-family: 'helvetica';
font-size: 16px;
color: #000;
margin: 0px;
display:inline-block;
align-items:center;
position: relative;
letter-spacing: .4em;
text-transform: uppercase;
text-decoration: none;
border: 4px solid #000;
padding: .3em .75em;
margin: 0px;
text-align: center;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
}
.button:hover {
color: #fff;
background-color: #000;
}
projec<span style="letter-spacing:0px;">t</span
Although the spec says letter-spacing shouldn't be added at the end of the line, it seems it is added regardless. You can use this padding instead to "undo" it:
padding: .3em calc(.74em - .4em) .3em .75em;
or equivalently
padding: .3em .35em .3em .75em;
.b1 {
border: 1px solid black;
padding: .3em .75em;
letter-spacing: .4em;
}
.b2 {
border: 1px solid black;
padding: .3em calc(.75em - .4em) .3em .75em;
letter-spacing: .4em;
}
<span class="b1">FOO</span>
<span class="b2">FOO</span>
I'm trying to create an CSS button hover effect. But I didn't manage to fill the element with a slanted shape.
How the hover effect was planned:
Screenshot 1: How it looks actually.
Screenshot 2: How I want the hover effect to look like with slanted side.
.button_sliding_bg {
color: #31302B;
background: #FFF;
padding: 12px 17px;
margin: 25px;
font-family: 'OpenSansBold', sans-serif;
border: 3px solid #31302B;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 2px;
display: inline-block;
text-align: center;
cursor: pointer;
box-shadow: inset 0 0 0 0 #31302B;
-webkit-transition: all ease 0.8s;
-moz-transition: all ease 0.8s;
transition: all ease 0.8s;
}
.button_sliding_bg:hover {
box-shadow: inset 200px 0 0 0 #31302B;
color: #FFF;
}
<button class="button_sliding_bg">Buttontext</button>
You can use the technique described in this answer : Fill element from center on hover and skew the pseudo element so it fills the button with a slant :
div {
position: relative;
display: inline-block;
padding: 15px 70px;
border: 5px solid #B17461;
color: #B17461;
font-size: 30px;
font-family: arial;
transition: color .5s;
overflow:hidden;
}
div:before {
content: '';
position: absolute;
top: 0; left: 0;
width: 130%; height: 100%;
background: #B17461;
z-index: -1;
transform-origin:0 0 ;
transform:translateX(-100%) skewX(-45deg);
transition: transform .5s;
}
div:hover {
color: #fff;
}
div:hover:before {
transform: translateX(0) skewX(-45deg);
}
<div>BUTTON</div>
Don't forget to add vendor prefixes for browser support (see canIuse for more info).
I believe that you are actually looking for the end state to fill the entire element with background color and not leave the gap. You could also do it with linear-gradient background images and transition their background-size and background-position like in the below snippet.
One disadvantage of using linear-gradient over pseudo-elements or transforms is that the browser support is lower but it doesn't need extra pseudo-elements and so can leave them spare for other use.
.button_sliding_bg {
color: #31302B;
background: #FFF;
padding: 12px 17px;
margin: 25px;
font-family: 'OpenSansBold', sans-serif;
border: 3px solid #31302B;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 2px;
display: inline-block;
text-align: center;
cursor: pointer;
background-image: linear-gradient(135deg, #31302B 50%, transparent 51%);
background-size: 100px 100px; /* some initial size to get the slanted appearance */
background-position: -50px -50px; /* negative positioning to hide it initially */
background-repeat: no-repeat;
transition: all ease 0.8s;
}
.button_sliding_bg:hover {
background-size: 200% 200%; /* 200% because gradient is colored only for 50% */
background-position: 0px 0px; /* bring it fully into view */
color: #FFF;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<button class="button_sliding_bg">Buttontext</button>
<button class="button_sliding_bg">Button text lengthy</button>
<button class="button_sliding_bg">Button text <br> with line break</button>
<button class="button_sliding_bg">Button text <br> with <br> multiple <br> line <br>breaks</button>
You can use css :after.
Jsfiddle
.button_sliding_bg {
color: #31302B;
background: #FFF;
padding: 12px 17px;
margin: 25px;
font-family:'OpenSansBold', sans-serif;
border: 3px solid #31302B;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 2px;
display: inline-block;
text-align: center;
cursor: pointer;
box-shadow: inset 0 0 0 0 #31302B;
-webkit-transition: all ease 0.8s;
-moz-transition: all ease 0.8s;
transition: all ease 0.8s;
position: relative;
}
.button_sliding_bg:hover {
box-shadow: inset 200px 0 0 0 #31302B;
color: #FFF;
}
.button_sliding_bg:after {
content:'';
display: block;
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 0;
border-width: 0 0 0 0;
border-color: transparent transparent #fff transparent;
border-style: solid;
border-width: 0 0 32px 30px;
-webkit-transition: all ease 0.8s;
-moz-transition: all ease 0.8s;
transition: all ease 0.8s;
}
<button class="button_sliding_bg">Buttontext</button>
I would like my button to have a background/font-color transition when I hover it, but not when I am clicking it (active).
Currently I have the transition effect on both hover and active.
I tried adding transition: 0s ease-out; on either :active or :hover but I didn't get the expected result.
What is correct, cleanest and simplest way to do this (by using css) ?
button {
position: absolute;
width: 80px;
height: 28px;
font-size: 13px;
font-weight: 700;
line-height: 28px;
color: #6cb4d5;
font-family: 'Lato', sans-serif;
padding: 0;
border: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-left: 1px solid #CCC;
background-color: #fff;
transition: 0.3s ease-out;
}
button:hover {
color: #f7f7f7;
background-color: #6cb4d5;
outline: 0;
}
button:active {
color: #f7f7f7;
background-color: #398cb2;
outline: 0;
}
<button type="submit" name="sub-avatar-url" id="sub-avatar-url"> UPLOAD</button>
Thanks a lot.
Try this https://jsfiddle.net/2Lzo9vfc/93/
button {
position: absolute;
width: 80px;
height: 28px;
font-size: 13px;
font-weight: 700;
line-height: 28px;
color: #6cb4d5;
font-family: 'Lato', sans-serif;
padding: 0;
border: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-left: 1px solid #CCC;
background-color: #fff;
transition: all 0.3s ease-out;
}
button:hover {
color: #f7f7f7;
background-color: #6cb4d5;
outline: 0;
}
button:active {
color: red;
background-color: blue;
outline: 0;
transition: none;
}
If you want the button to go back to it's original colors on button:active, then adding in the original values to the :active block will correct this.
However, if you want to display the colors you have while hovering over the button while active, simply removing the :active block will give that effect.
Both are here next to each other. Hopefully this is what you wanted. :)
https://jsfiddle.net/2Lzo9vfc/94/
button {
position: absolute;
width: 80px;
height: 28px;
font-size: 13px;
font-weight: 700;
line-height: 28px;
color: #6cb4d5;
font-family: 'Lato', sans-serif;
padding: 0;
border: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-left: 1px solid #CCC;
background-color: #fff;
transition: all 0.3s ease-out;
}
button:hover {
color: #f7f7f7;
background-color: #6cb4d5;
outline: 0;
}
#sub-avatar-url2:hover {
color: #f7f7f7;
background-color: #6cb4d5;
outline: 0;
}
#sub-avatar-url2:active {
background-color: #fff;
color: #6cb4d5;
outline: 0;
transition: none;
}
<button type="submit" name="sub-avatar-url" id="sub-avatar-url"> UPLOAD</button> <br><br>
<button type="submit" name="sub-avatar-url2" id="sub-avatar-url2"> UPLOAD</button>
This May Help you-
button {
position: absolute;
width: 80px;
height: 28px;
font-size: 13px;
font-weight: 700;
line-height: 28px;
color: #6cb4d5;
font-family: 'Lato', sans-serif;
padding: 0;
border: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-left: 1px solid #CCC;
background-color: #fff;
transition: 0.3s ease-in;outline: 0;
}
button:hover {
color: #f7f7f7;
background-color: #6cb4d5;
outline: 0;
}
button:active {
color: #f7f7f7;
background-color: #398cb2;
outline: 0;transition:all 0ms ease-out
}
button:focus{transition:all 0ms ease-out}
You could try applying the transition: 0s; to the active statement - however, you also need to add in the :focus event to the declaration chain to prevent the button transitioning when you release the click.
You can see the fiddle here:
http://jsfiddle.net/eks8Lc5c/
I have a problem in my button width. my form is able to switch language. For some language the content of the button is longer then the button width, How can I adjust the button width proprety to the text lenght ?
Here is my CSS :
html .formRowSubmit input[type="submit"] {
width: 26%;
margin: 5px 0% 5px ;
margin-bottom: 10px;
height: 25px;
border-radius: 3px;
outline: 0;
-moz-outline-style: none;
background: #CAD722;
border: none;
color: white;
font-size: 10px;
font-weight: 150;
cursor: pointer;
transition: box-shadow .4s ease;
}
You should try setting a min-width instead of a width, this will let the button expand if need be. Once you do this you should also set some horizontal padding so the text isnt butted up to the end like so:
input[type="submit"] {
min-width: 26%;
padding: 5px 15px;
}
http://jsfiddle.net/jqjxd0xt/
Display the button as an inline-block (and delete the width)
html .formRowSubmit input[type="submit"] {
/*width: 26%;*/
display: inline-block;
margin: 5px 0% 5px ;
margin-bottom: 10px;
height: 25px;
border-radius: 3px;
outline: 0;
-moz-outline-style: none;
background: #CAD722;
border: none;
color: white;
font-size: 10px;
font-weight: 150;
cursor: pointer;
transition: box-shadow .4s ease;
}
You might want to add some padding if the text is to close to the border.
Try like this: demo
CSS:
.formRowSubmit input[type="submit"] {
width: auto;
margin: 5px 0% 5px;
margin-bottom: 10px;
height: 25px;
border-radius: 3px;
outline: 0;
-moz-outline-style: none;
background: #CAD722;
border: none;
color: white;
font-size: 10px;
font-weight: 150;
cursor: pointer;
transition: box-shadow .4s ease;
}
HTML:
<div class="formRowSubmit">
<input type="submit" value="Submit loooong llloooonnnng text">
</div>
I have an issue with Firefox rendering element to which is applied box shadow and rotation.
Is there any fix for this? I tried to apply rotateZ() backface visibility, no results.
.button{
backface-visibility: hidden;
padding-left: 1em;
padding-right: 1em;
line-height: 2.5em;
color: #FFF;
cursor: pointer;
min-width: 200px;
text-align: center;
text-decoration: none;
transition: all 100ms ease-in-out 0s;
background: #FFB600;
display: inline-block;
font-family: sans-serif;
font-size: 1.2em;
outline: 1px solid transparent;
box-shadow: 0.1em 0.1em 0px #DC6900, 0.2em 0.2em 1px #A32020;
transform:rotate(3deg);
padding-left: 1.5em;
padding-right: 1.5em;
background-color: #DC6900;
}
<a class="button">I am fancy button</a>
Firefox rendering 1
Just can add a border:
border: 1px solid #DC6900;
https://stackoverflow.com/a/9333891/1064270
.button{
backface-visibility: hidden;
padding-left: 1em;
padding-right: 1em;
line-height: 5.5em;
color: #FFF;
cursor: pointer;
min-width: 400px;
text-align: center;
text-decoration: none;
transition: all 100ms ease-in-out 0s;
background: #FFB600;
display: inline-block;
font-family: sans-serif;
font-size: 1.2em;
outline: 1px solid transparent;
box-shadow: 0.1em 0.1em 0px #DC6900, 0.2em 0.2em 1px #A32020;
padding-left: 1.5em;
transform:rotate(3deg);
padding-right: 1.5em;
background-color: #DC6900;
}
.with-border{border: 1px solid #DC6900;}
<a class="button">I am fancy button</a>
<br/>
<br/>
<a class="button with-border">I have a border</a>