I'm dipping my toes into web design for now and I'm trying to replicate the "buy more" button animation from here( https://themes.getbootstrap.com/preview/?theme_id=67539 ). While I did find a solution for the border, I can't make a smooth animation for the icon(I am using font awesome), instead it just jumps directly.
Thanks in advance for the help
My CSS is this for the button is:
and the html for it is `Buy now <i class="fas fa-level-down-alt navbar__btn--i"></i>`
.navbar__btn {
position: relative;
font-size: 1.2rem;
color: #fff;
display: inline-block;
margin-right: 7rem;
padding-top: .5rem;
}
.navbar__btn:after {
margin-top: .3rem;
display: block;
content: " ";
border-bottom: solid 2px #fff;
transform: scaleX(0);
transform-origin: 0% 100%;
transition: all 1s ease-in-out;
}
.navbar__btn:hover:after {
transform:scaleX(1.2);
}
.navbar__btn:hover .navbar__btn--i {
left: 7rem;
}
.navbar__btn--i {
position: absolute;
top: 5px;
transition: all 1s linear 1s;
}
And the html is
Buy now <i class="fas fa-level-down-alt navbar__btn--i"></i>
Replace the appropriate icon. I designed it according to the link. You can adjust the delays to your liking
.navbar__btn {
position: relative;
font-size: 1.2rem;
color: #fff;
display: inline-block;
margin-right: 7rem;
padding-top: .5rem;
color:black;
text-decoration:none;
color:white;
}
.navbar__btn:after {
margin-top: .3rem;
display: block;
content: " ";
border-bottom: solid 2px #fff;
transform: scaleX(0);
transform-origin: 0% 100%;
transition: all .5s ease-in-out;
}
.navbar__btn:hover:after {
transform:scaleX(1.3);
}
.navbar__btn:hover .navbar__btn--i {
right: -20px;
}
.navbar__btn--i {
position: absolute;
top: 5px;
right:-10px;
line-height:0px;
transition: all .3s linear 0s;
vertical-align:middle;
margin-top:15px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div style="heigth:100px;width:500px;background:red;padding:5px;">
Buy now <i class="fas fa-arrow-right navbar__btn--i"></i>
</div>
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.
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;
}
There are plenty of JavaScript-based libraries that show tooltips when you hover your mouse over a certain area of a web page. Some are rather plain, some allow the tooltip to display HTML content styled with CSS.
But is there a way to show a styled tooltip without using JavaScript? If you just use the title attribute, tags are not processed (e.g. foo<br />bar doesn't produce a line break). I'm looking for a solution that allows one to display styled HTML content without using any JavaScript.
I have made a little example using css
.hover {
position: relative;
top: 50px;
left: 50px;
}
.tooltip {
/* hide and position tooltip */
top: -10px;
background-color: black;
color: white;
border-radius: 5px;
opacity: 0;
position: absolute;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.hover:hover .tooltip {
/* display tooltip on hover */
opacity: 1;
}
<div class="hover">hover
<div class="tooltip">asdadasd
</div>
</div>
FIDDLE
http://jsfiddle.net/8gC3D/471/
Using the title attribute:
Link
Similar to koningdavid's, but works on display:none and block, and adds additional styling.
div.tooltip {
position: relative;
/* DO NOT include below two lines, as they were added so that the text that
is hovered over is offset from top of page*/
top: 10em;
left: 10em;
/* if want hover over icon instead of text based, uncomment below */
/* background-image: url("../images/info_tooltip.svg");
/!* width and height of svg *!/
width: 16px;
height: 16px;*/
}
/* hide tooltip */
div.tooltip span {
display: none;
}
/* show and style tooltip */
div.tooltip:hover span {
/* show tooltip */
display: block;
/* position relative to container div.tooltip */
position: absolute;
bottom: 1em;
/* prettify */
padding: 0.5em;
color: #000000;
background: #ebf4fb;
border: 0.1em solid #b7ddf2;
/* round the corners */
border-radius: 0.5em;
/* prevent too wide tooltip */
max-width: 10em;
}
<div class="tooltip">
hover_over_me
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis purus dui. Sed at orci. </span>
</div>
This one is very interesting,
HTML and CSS only
.help-tip {
position: absolute;
top: 18px;
left: 18px;
text-align: center;
background-color: #BCDBEA;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
}
.help-tip:before {
content: '?';
font-weight: bold;
color: #fff;
}
.help-tip:hover span {
display: block;
transform-origin: 100% 0%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.help-tip span {
display: none;
text-align: left;
background-color: #1E2021;
padding: 5px;
width: 200px;
position: absolute;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
left: -4px;
color: #FFF;
font-size: 13px;
line-height: 1.4;
}
.help-tip span:before {
position: absolute;
content: '';
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: #1E2021;
left: 10px;
top: -12px;
}
.help-tip span:after {
width: 100%;
height: 40px;
content: '';
position: absolute;
top: -40px;
left: 0;
}
<span class="help-tip">
<span > This is the inline help tip! </span>
</span>
Pure CSS:
.app-tooltip {
position: relative;
}
.app-tooltip:before {
content: attr(data-title);
background-color: rgba(97, 97, 97, 0.9);
color: #fff;
font-size: 12px;
padding: 10px;
position: absolute;
bottom: -50px;
opacity: 0;
transition: all 0.4s ease;
font-weight: 500;
z-index: 2;
}
.app-tooltip:after {
content: '';
position: absolute;
opacity: 0;
left: 5px;
bottom: -16px;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent rgba(97, 97, 97, 0.9) transparent;
transition: all 0.4s ease;
}
.app-tooltip:hover:after,
.app-tooltip:hover:before {
opacity: 1;
}
<div href="#" class="app-tooltip" data-title="Your message here"> Test here</div>
Another similar way to do it with CSS:
#img { }
#img:hover {visibility:hidden}
#thistext {font-size:22px;color:white }
#thistext:hover {color:black;}
#hoverme {width:50px;height:50px;}
#hoverme:hover {
background-color:green;
position:absolute ;
left:300px;
top:100px;
width:40%;
height:20%;
}
<p id="hoverme"><img id="img" src="http://a.deviantart.net/avatars/l/o/lol-cat.jpg"></img><span id="thistext">LOCATZ!!!!</span></p>
Try the Js Fiddle
Here are some links about transitions and other ways to do it:
http://www.w3schools.com/css3/css3_transitions.asp
http://dev.opera.com/articles/view/css3-show-and-hide/
You can use the title attribute, e.g. if you want to have a Tooltip over a text, just make:
<span title="This is a Tooltip">This is a text</span>
This is my solution for this:
https://gist.github.com/BryanMoslo/808f7acb1dafcd049a1aebbeef8c2755
The element recibes a "tooltip-title" attribute with the tooltip text and it is displayed with CSS on hover, I prefer this solution because I don't have to include the tooltip text as a HTML element!
#HTML
<button class="tooltip" tooltip-title="Save">Hover over me</button>
#CSS
body{
padding: 50px;
}
.tooltip {
position: relative;
}
.tooltip:before {
content: attr(tooltip-title);
min-width: 54px;
background-color: #999999;
color: #fff;
font-size: 12px;
border-radius: 4px;
padding: 9px 0;
position: absolute;
top: -42px;
left: 50%;
margin-left: -27px;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:after {
content: "";
position: absolute;
top: -9px;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #999999 transparent transparent;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover:before,
.tooltip:hover:after{
visibility: visible;
opacity: 1;
}
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