I've a form in which I've a file upload filed I did customized it to fit the color theme which the PHP form is using it works but it's just static. I wanted to add a small transition to the button which I archived following the W3Schools tutorial.
But after that I'm facing a problem which I really don't have an idea how to solve. I did a search on this matter but most answers suggest to use bootstrap which I also tried and it messed up my current projects CSS.
Can some one show me what I'm doing wrong with the animation part.
.fileUpload {
float: left;
position: relative;
overflow: hidden;
background-color: #4068E0;
color: white;
height: 30px;
width: 120px;
text-align: center;
border: 2px solid #4068E0;
border-radius: 20px;
box-shadow: 2px 2px 1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition: prop 0.4s;
-moz-transition: prop 0.4s;
-ms-transition: prop 0.4s;
-o-transition: prop 0.4s;
transition: prop 0.4s;
}
.fileUpload:after {
content: "";
background: #85b7e8;
display: block;
position: absolute;
opacity: 0;
transition: all 0.8s;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
font-size: 20px;
cursor: pointer;
filter: alpha(opacity=0);
height: 100%;
text-align: center;
}
.fileUpload:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
height: 100%;
text-align: center;
}
.fileName {
margin: 2px 0 0 130px;
width: auto;
}
.updLabel {
line-height: 30px;
font-weight: bold;
}
#uploadFile {
border: none;
width: 150px;
height: 30px;
}
<div class="usrCreate-form-right">
<div class="fileUpload">
<span class="updLabel">Add Image</span>
<input type="file" id="uploadFile" class="upload">
</div>
<div class="fileName">
<input id="uploadFile" placeholder="0 files selected" disabled>
</div>
</div>
As you can see in the above snippet the animation does happens but it doesn't pop the file selection window. If I disable the animation part it does pop up I tried few other things which also didn't work that's why I decided to ask here.
I've got success with your code when I add a z-index on the input. I tried with z-index: 1 and it worked. the visuals on the button won't change.
.fileUpload > input {
z-index: 1;
}
Related
I'm using Word Press with Mikado theme and have created a widget for a button the code for the button is in html. However, when I go to additional css under appearance and enter my css the link stops working. The html works (link wise) until I use the css. Any thoughts?
.wp-block-button {
position: relative;
height: 20px;
line-height: 20px;
text-align: center;
transition: 0s;
padding: 20px 20px;
cursor: pointer;
transition: 0s;
}
.wp-block-button {
background-color: transparent!important;
border-color: transparent!important;
color: #000000!important;
}
.wp-block-button:hover:before {
transition-delay: 0s;
}
.wp-block-button:before {
width: 0%;
height: 100%;
z-index: 3;
content: '';
position: absolute;
bottom: .1em;
left: 2em;
box-sizing: border-box;
transition: 0s;
}
.wp-block-button:hover:before {
width: 80% !important;
transition: 0s;
}
.wp-block-button:before {
border-bottom: 3px solid #59629a!important;
}
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size is-style-outline" style="font-size:18px">
<a class="wp-block-button__link has-white-color has-text-color has-background wp-element-button" href="https://rothgrouplaw.com/new-client-intake-form/" style="border-radius:0px;background-color:#111e6e">Schedule Your Free Evaluation
</a>
</div>
Try taking out the position: relative; from the .wp-block-button class. I think that is your problem.
This question already has answers here:
Keep the pseudo element in between the background and main content
(1 answer)
Avoid z-index working relative to the parent element
(1 answer)
Closed 4 years ago.
I am trying create a hover effect using CSS. Here is the link: http://creativeartbd.com/demo/test.html
Here is the code:
/* GENERAL BUTTON STYLING */
button,
button::after {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
button {
background: none;
border: 3px solid red;
border-radius: 5px;
color: red;
display: block;
font-size: 1.6em;
font-weight: bold;
margin: 1em auto;
padding: 2em 6em;
position: relative;
text-transform: uppercase;
}
button::before,
button::after {
background:red;
content: '';
position: absolute;
z-index: -1;
}
button:hover {
color: black;
}
/* BUTTON 5 */
.btn-5 {
overflow: hidden;
}
.btn-5::after {
/*background-color: #f00;*/
height: 100%;
left: -35%;
top: 0;
transform: skew(50deg);
transition-duration: 0.6s;
transform-origin: top left;
width: 0;
}
.btn-5:hover:after {
height: 100%;
width: 135%;
}
<button class="btn-5">Button 5</button>
now if you run it you can see that there is style when you hover over the button. Now I want to set initial background for this button. So that IF I set the background here:
button {
background: orange;
}
If I do so then the effect is not showing.
Can you tell me why and how can I solve it?
JSFiddle
add z-index:0 to the element to create a stacking context and keep the pseudo element inside. You can then add background
/* GENERAL BUTTON STYLING */
button,
button::after {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
button {
background: none;
border: 3px solid red;
border-radius: 5px;
color: red;
display: block;
font-size: 1.6em;
font-weight: bold;
margin: 1em auto;
padding: 2em 6em;
position: relative;
z-index:0;
background:orange;
text-transform: uppercase;
}
button::before,
button::after {
background:red;
content: '';
position: absolute;
z-index: -1;
}
button:hover {
color: black;
}
/* BUTTON 5 */
.btn-5 {
overflow: hidden;
}
.btn-5::after {
/*background-color: #f00;*/
height: 100%;
left: -35%;
top: 0;
transform: skew(50deg);
transition-duration: 0.6s;
transform-origin: top left;
width: 0;
}
.btn-5:hover:after {
height: 100%;
width: 135%;
}
<button class="btn-5">Button 5</button>
You can also simplify your code like follow:
button {
background: none;
border: 3px solid red;
border-radius: 5px;
color: red;
display: block;
font-size: 1.6em;
font-weight: bold;
margin: 1em auto;
padding: 2em 6em;
background:
linear-gradient(50deg,red 50%,transparent 50.5%),
orange;
background-size:250% 100%;
background-position: right;
text-transform: uppercase;
transition: all 0.5s;
}
button:hover {
color: black;
background-position: left;
}
<button class="btn-5">Button 5</button>
I am encountering a problem with a radio button in IE 11.
I have a simple radio button that makes my content scroll down once checked.
Without any styles applied, there is no problem. But with, the problem is back.
Does it have something to do with the IE render engine?
.switch {
position: relative;
display: block;
width: 34px;
height: 18px;
border-radius: 8px;
cursor: pointer;
outline: 0;
height: 18px;
top: 5px;
background-color: $grey-light;
box-shadow: $switch-shadow;
&::before {
content: " ";
position: absolute;
left: 2px;
top: 2px;
border-radius: 50%;
margin: 0;
outline: none;
height: 14px;
width: 14px;
background: white;
transition: background-color .08s ease-in;
}
&.active::before {
background-color: $green-dark;
left: 18px;
transition: background-color .08s ease-in, left .08s ease-in;
}
&.inactive::before {
background-color: $grey-dark;
left: 2px;
transition: background-color .08s ease-in, left .08s ease-in;
}
input[type=checkbox] {
// display: none;
visibility: hidden;
position: absolute;
z-index: -1;
}
}
Thanks for your help!
EDIT.
I forgot to precise that the scrolling box (flex: 1) has a parent which has display: flex.
http://jsfiddle.net/93bphr4f/
html:
<button type="button" onClick="location.href='#'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>
css:
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
look at it,
I dont know why when I hover mouse on button, text move to top..
I want to text be still on center of button.
What i doing wrong?
Anyone can help?
Don't know why you complicated it too much but you simple use line-height equal of element height:
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
line-height: 75px;/*add line height equal of element height*/
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
<button type="button" onClick="location.href='./freeaccess'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>
You shouldn't use the :after tag at all in this situation.
// All the positioning made the button go crazy.
You should do it this way:
Use .buttonClass { } to set the basic button styling, and use .buttonClass:hover { } to only change the background of the button. You don't have to duplicate every item in the :hover part.
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
border-radius: 5px;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
height: 75px;
width: 100%;
background: #e57780;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
.buttonpink2:hover {
background: #c24e57;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
}
Strange way to do, why are you using pseudo-elements just in order to change background-color ?
.buttonpink2:after {
height: 75px;
line-height:75px;
...
}
will solve your problem, but I suggest you to remove the .buttonpink2:after element and just change the background-color of the button
If you would rather using padding instead of line-height, you can do this:
.buttonpink2:after {
height: 50%;
padding: 20px 0;
}
You can add some letter-spacing on :after to solve it, I just added 0.3px, you can try other values to make it better.
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
letter-spacing: 0.3px
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
<button type="button" onClick="location.href='#'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>
I'm trying to create a button with Zurb Foundation using Rails for uploading a picture. I tried this:
<input class="tiny round disabled button" name="picture[picture]" type="file">
Unfortunately, it didn't work and created two different buttons that let you choose a picture. Is there anything I need to do specifically for file fields?
I've found this resource to be very helpful with styling input type="file" :
http://www.quirksmode.org/dom/inputfile.html
It's notoriously difficult but this essentially involves layering the actual input with a fake one that has your styling applied to it.
<div class="file-inputs">
<input type="file" class="hidden-input">
<div class="fake-input">
<input>
<img src="images/YOURBUTTON.png">
</div>
</div>
To go with the following CSS:
div.file-inputs {
position: relative;
}
div.hidden-input {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
Custom file upload button using html css and js
Html code:
<div class="custom-file-upload">
<!--<label for="file">File: </label>-->
<input type="file" id="file" name="myfiles[]" multiple />
</div>
CSS:
.custom-file-upload-hidden {
display: none;
visibility: hidden;
position: absolute;
left: -9999px;
}
.custom-file-upload {
display: block;
width: auto;
font-size: 16px;
margin-top: 30px;
}
.custom-file-upload label {
display: block;
margin-bottom: 5px;
}
.file-upload-wrapper {
position: relative;
margin-bottom: 5px;
}
.file-upload-input {
width: 300px;
color: #fff;
font-size: 16px;
padding: 11px 17px;
border: none;
background-color: #c0392b;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
float: left;
/* IE 9 Fix */
}
.file-upload-input:hover, .file-upload-input:focus {
background-color: #ab3326;
outline: none;
}
.file-upload-button {
cursor: pointer;
display: inline-block;
color: #fff;
font-size: 16px;
text-transform: uppercase;
padding: 11px 20px;
border: none;
margin-left: -1px;
background-color: #962d22;
float: left;
/* IE 9 Fix */
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.file-upload-button:hover {
background-color: #6d2018;
}
JS CODE:
http://codepen.io/wallaceerick/pen/fEdrz check this one for complete details
The trick is to do something that looks like this:
HTML
<button class="file-upload">Upload
<input type="file" name="files" />
</button>
CSS
button.file-upload > input[type='file'] {
cursor: pointer;
position: absolute;
font-size: 0;
top: 0;
left: 0;
opacity: 0;
height: 100%;
width: 100%;
}
Using foundation v5.5.2: http://codepen.io/soyuka/pen/xGMPKJ