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>
Related
When I click the button, a border is shown. How can I remove this border and why is it there?
This is the CSS code:
.operator button {
margin: 3px;
/*height: 25px;
width: 25px;*/
border-radius: 50%;
background-color: green;
border: none;
font-size: 10px;
padding: 12px 12px;
border: 2px solid #4CAF50;
transition-duration: 1s;
text-align: center;
display: inline;
}
[here is an image 1
Add outline: 0; on your button:focus :
.operator button {
margin: 3px;
/*height: 25px;
width: 25px;*/
border-radius: 50%;
background-color: green;
border: none;
font-size: 10px;
padding: 12px 12px;
border: 2px solid #4CAF50;
transition-duration: 1s;
text-align: center;
display: inline;
}
.operator button:focus { outline: 0; }
<div class="operator">
<button>Test</button>
</div>
You might want to read this too : https://stackoverflow.com/a/25298082/9718056
As you can see on the screenshot below, my pink button is not fully responsive: below a certain width it gets cut instead of resizing to remain within the viewport width.
What is the issue?
Many thanks
.btn {
background-color: #ff00bf;
border: 0 none;
border-radius: 25px;
box-shadow: 0 11px 22px rgba(34, 34, 34, 0.2);
color: #fff;
display: inline-block;
font-size: 1rem;
letter-spacing: 0.025em;
padding: 1.1em 2.28em 1em;
text-decoration: none;
transition: all 0.3s ease-out 0s;
}
.btn {
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: normal;
line-height: 1.42857;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
}
The white-space: nowrap makes line-breaking impossible. Just remove it. Also I would set the max-width to 100%.
.btn {
background-color: #ff00bf;
border: 0 none;
border-radius: 25px;
box-shadow: 0 11px 22px rgba(34, 34, 34, 0.2);
color: #fff;
display: inline-block;
font-size: 1rem;
letter-spacing: 0.025em;
padding: 1.1em 2.28em 1em;
text-decoration: none;
transition: all 0.3s ease-out 0s;
}
.btn {
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: normal;
line-height: 1.42857;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
touch-action: manipulation;
vertical-align: middle;
max-width: 100%;
}
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">
I want a text-area with black background to be within DIV with white background. Text-area should not fill the complete DIV so the DIV's white color is still seen around text-area. DIV itself should occupy only 80% of the screen's width (or browser's tab). The problem is that the DIV's white background ain't seen around text-area.
.mydiv {
vertical-align: middle;
width: 80%;
text-align: left;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
background: white;
}
.mytextarea {
height: 100px;
width: 100%;
position: relative;
padding: 2px 2px;
font-size: 12px;
font-weight: bold;
float: left;
border-radius: 10px;
font-family: 'Helvetica', cursive;
color: white;
text-decoration: none;
background-color: black;
border-bottom: 4px solid #2980B9;
border: 2px solid blue;
outline: 0;
}
You can use display:inline-block; instead of float:left;
.mytextarea {
height: 100px;
width: 100%;
position: relative;
padding: 2px 2px;
font-size: 12px;
font-weight: bold;
display: inline-block;
border-radius: 10px;
font-family: 'Helvetica', cursive;
color: white;
text-decoration: none;
background-color: black;
border-bottom: 4px solid #2980B9;
border: 2px solid blue;
outline: 0;
}
Jsfiddle
.mydiv {
vertical-align: middle;
width: 80%;
text-align: left;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
background: red;
}
.mytextarea {
height: 100px;
width: 100%;
position: relative;
padding: 2px 2px;
font-size: 12px;
font-weight: bold;
display: inline-block;
border-radius: 10px;
font-family: 'Helvetica', cursive;
color: white;
text-decoration: none;
background-color: black;
border-bottom: 4px solid #2980B9;
border: 2px solid blue;
outline: 0;
}
<div class="mydiv">
<textarea class="mytextarea"></textarea>
</div>
I am trying to create a button that shows a loading spinner when waiting for a response. But there is some weird things going on which I do not understand at all.
I have the following HTML with a bunch of CSS:
<button type="submit" disabled="true" class="btn btn-blue btn-loading">
<div class="btn-loading-text">Update profile</div>
<div class="btn-loading-spinner"></div>
</button>
If you comment out the spinner element, then the "Update profile" aligns itself in the center even tho I did not ask it to.
* {
box-sizing: border-box;
}
.btn-loading {
border-radius: 2px;
font-size: 13px;
font-family: arial, helvetica, sans-serif;
text-decoration: none;
display: inline-block;
font-weight: bold;
outline: 0;
background: #f5f5f5 !important;
border: 1px solid #ddd !important;
color: #aaa !important;
cursor: default !important;
overflow: hidden;
height: 40px;
}
.btn-loading-text {
float: left;
margin: 0px 15px 0px 15px;
}
.btn-loading-spinner {
float: left;
height: 25px;
width: 25px;
margin: 7px 15px 6px -5px;
position: relative;
animation: rotation .9s infinite linear;
border-left: 3px solid #ddd;
border-right: 3px solid #ddd;
border-bottom: 3px solid #ddd;
border-top: 3px solid #aaa;
border-radius: 100%;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
<button type="submit" disabled="true" class="btn-loading">
<div class="btn-loading-text">Update profile</div>
<!--<div class="btn-loading-spinner"></div>-->
</button>
But when the spinner element is there it suddently goes to the top. I have no idea what's going on.
* {
box-sizing: border-box;
}
.btn-loading {
border-radius: 2px;
font-size: 13px;
font-family: arial, helvetica, sans-serif;
text-decoration: none;
display: inline-block;
font-weight: bold;
outline: 0;
background: #f5f5f5 !important;
border: 1px solid #ddd !important;
color: #aaa !important;
cursor: default !important;
overflow: hidden;
height: 40px;
}
.btn-loading-text {
float: left;
margin: 0px 15px 0px 15px;
}
.btn-loading-spinner {
float: left;
height: 25px;
width: 25px;
margin: 7px 15px 6px -5px;
position: relative;
animation: rotation .9s infinite linear;
border-left: 3px solid #ddd;
border-right: 3px solid #ddd;
border-bottom: 3px solid #ddd;
border-top: 3px solid #aaa;
border-radius: 100%;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
<button type="submit" disabled="true" class="btn-loading">
<div class="btn-loading-text">Update profile</div>
<div class="btn-loading-spinner"></div>
</button>
The content of a button element are vertically aligned to the middle.
When you only have .btn-loading-text, that element is 16px tall, and the button is 38px tall, so .btn-loading-text is aligned to the middle.
However, when you also include .btn-loading-spinner, which is 38px tall (including borders and margins), the content of the button is as tall as the tallest of the elements, so 38px. So the alignment to the middle is not noticeable.
If you want to align each element to the middle, instead of aligning the content as a whole, you can use display: inline-block instead of float: left, and vertical-align: middle.
.btn-loading-text, .btn-loading-spinner {
float: none; /* Initial value */
display: inline-block;
vertical-align: middle;
}
* {
box-sizing: border-box;
}
.btn-loading {
border-radius: 2px;
font-size: 13px;
font-family: arial, helvetica, sans-serif;
text-decoration: none;
display: inline-block;
font-weight: bold;
outline: 0;
background: #f5f5f5 !important;
border: 1px solid #ddd !important;
color: #aaa !important;
cursor: default !important;
overflow: hidden;
height: 40px;
}
.btn-loading-text, .btn-loading-spinner {
display: inline-block;
vertical-align: middle;
}
.btn-loading-text {
margin: 0px 15px 0px 15px;
}
.btn-loading-spinner {
height: 25px;
width: 25px;
margin: 7px 15px 6px -5px;
position: relative;
animation: rotation .9s infinite linear;
border-left: 3px solid #ddd;
border-right: 3px solid #ddd;
border-bottom: 3px solid #ddd;
border-top: 3px solid #aaa;
border-radius: 100%;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
<button type="submit" disabled="true" class="btn-loading">
<div class="btn-loading-text">Update profile</div>
<div class="btn-loading-spinner"></div>
</button>