We Keep Coding

How to create a smooth animated flowing button?

I'm planning to change all the input[type=submit]s & buttons in my website into this smooth animated flowing button.
So, how do I create this using HTML, JavaScript & CSS? Especially I made this GIF to post it in Stack Overflow. And I don't think, I've to post some codes in this question to explain it. :/
EDIT: I don't want exactly Curls effect with bottom right to top left. It should start affecting from the area I click. In the next GIF I've clicked in the middle. Now please see the affect.
I hope you can understand what I mean. It should start flowing to the outside from the exact area I click.

You can use hover.css, Checkout background transition in that
http://ianlunn.github.io/Hover/ .
If you want exactly like the one you posted. you can always try some trial and error with hover.css

you can easily make with simple css see this click

Hope this helps!
.button {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
overflow: hidden;
}
.button:after {
content: "";
background: #90EE90;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
<button class="button">Click Me</button>

Please check this , hope it is helpful.
a {
padding: 20px 30px;
line-height:30px;
color:#fff;
font-size: 20px;
background:#ff0000;
text-decoration: none;
position: relative;
transition: all ease .6s;
overflow:hidden;
display: inline-block;
}
a span {
z-index:1;
position:relative;
}
a:after {
transform: scale(0);
background: #000;
position: absolute;
right:-200px;
bottom:-200px;
content:'';
border-radius: 100%;
transition: all ease .6s;
width: 400px;
height: 400px;
}
a:hover:after {
transform:scale(1);
transition: all ease .6s;
}
<span>Test</span>

can be achieved by a small tweak from "Abhitalks" answer from this question!
In html :
<div class="outer_box" id="btn">
<span>Button text</span>
<div id="dummy"></div>
</div>
css :
.outer_box{
background-color: transparent;
width: 400px;
height: 400px;
position: relative;
border: 1px solid silver;
text-align:center;
}
#dummy {
position: absolute;
top: 400px; left: 400px;
width: 1px; height: 1px;
background-color: gray;
z-index: -5;
}
Script :
$('#btn').on("click", function() {
$('#dummy').animate({
'width': '400px',
'height': '400px',
'top': '0px',
'left': '0px'
}, 500);
//and any action to be done on click :)
});

Vertical Sliding nav menu isn't working

I wanna ask you something once again. So I wanna make my vertical menu a vertical sliding menu, which pushes site content when triggered. My function to toggle it does not work (I don't know if other effects like transition and translation works too, because menu active class isn't toggled).
When I click on my button nothing shows, even errors... I don't really know where is the problem.
Here is my code:
(function() {
var bodyEl = $('body'),
mobileicon = bodyEl.find('.mobile-icon');
mobileicon.on('click', function(e) {
bodyEl.toggleClass('active-mobile-menu');
e.preventDefault();
});
});
/*-----------------------------------------------
Mobile Icon Style
-----------------------------------------------*/
.mobile-icon {
position: absolute;
display: block;
width: 40px;
z-index: 5;
}
.mobile-icon:before {
width: 100%;
font-size: 2em;
font-family: "ElegantIcons";
font-weight: bold;
text-align: center;
content: "\64";
}
.mobile-icon:hover {
color: white;
background: black;
}
/*----------------------------------------------
Mobile Menu style
-----------------------------------------------*/
.mobile-show {
dispay: block;
}
.mobile-menu {
overflow: scroll;
position: fixed;
height: 100%;
width: 70%;
background: white;
z-index: 1000;
transform: translate3d(-100%, 0, 0);
transition: transform 0.4s ease;
}
.active-mobile-menu div {
transform: translate3d(0, 0, 0);
}
.active-mobile-menu .mobile-menu {
transform: translate3d(100%, 0, 0);
}
.mobile-menu ul {
top: 10.2%;
color: black;
position: relative;
text-align: left;
font-weight: bold;
}
.mobile-menu li a {
display: block;
padding: 4% 0;
border-bottom: 1px solid black;
}
.mobile-menu > ul> li:hover > a,
.mobile-menu > ul> li:hover > .sub-menu > li:hover > a,
.mobile-menu > ul .sub-menu .sub-menu > li:hover > a {
background-color: #111;
color: #fff;
}
.mobile-menu ul li ul {
height: 100%;
width: 100%;
visibility: hidden;
display: none;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
background: #fff;
border: none;
position: relative;
}
.mobile-menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<span class="mobile-icon"></span>
<div class="mobile-menu">
<header class="mobile-header">
<div class="mobile-branding">
<!--here is my logo code,its long so i don't wanna to slow you down-->
</div>
</header>
<ul class="mobile-menu-ul">
<div class="caret"></div>
<?php wp_nav_menu(array ( 'theme_location'=>'new-menu', 'container' => '', 'items_wrap' => '%3$s' )); ?>
</ul>
</div>

When I run your code through jsbin, the toggle works. I had to include the jQuery library, as you can see by the line
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
It is my suspicion that you do not have the jQuery library loaded on your page properly.

Well i find the solution by myself,i was added $(document).ready(function(){}); into the start of the document.And i putted my variables in new function,in which i put new function,so there was 3 functions in one another,and that was the conflict.Now its working,Thanks for your time guys <3

Responsive navigation stays hidden on window resize (pure JS)

I have been looking for a solution for over ten hours, today only, and have searched many more days before that. I'm asking a question here because I'll be ripping my hair out very soon if this goes on.
My problem : I have a responsive navigation which looks like a regular navbar on desktop sized screens that converts to a dropdown menu when window shrinks or device width gets too small. On the media queries front, I think I've got everything covered.
The Javascript is what is causing problems. Let me explain :
Desktop nav shrinks when window is resized
clicking to open/close the shrunk menu makes the list items pop out/hide without problem
when window is resized to its original width (with menu closed) the navigation stays hidden
Here are two examples to illustrate what I mean.
Responsive menu hidden on window resize
Responsive navigation hidden on window resize
I know what people might suggest : just make it work with jQuery there are many working examples. While that may be true, I'm not familiar with jQuery at all and if I could, I would rather not use a whole library just for this. I'm not very experienced in JavaScript either, but I prefer the pure JS approach.
HTML
<header class="header" id="return">
<div class="floatWrapper">
<nav class="grid70" >
<input type="button" onclick="toggle(navi)"/>
<ul class="allGrids navigation grid1" id="navi">
<li><a data-scroll href="#profil">About</a></li>
<li><a data-scroll href="#competences">Skills</a></li>
<li><a data-scroll href="#parcours">Work</a></li>
<li><a data-scroll href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
CSS
*,
:after,
:before{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing:border-box;
box-sizing: border-box;
word-wrap:break-word;
}
html, body{
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
font-size: 100%;
}
ul, li{
list-style-type: none;
padding:0;
margin:0;
}
a{
text-decoration: none;
}
.floatWrapper{
width: 90%;
max-width: 1120px;
margin:0 auto;
}
.floatWrapper:before,
.floatWrapper:after {
content:"";
display:block;
}
.floatWrapper:after {
clear:both;
}
.allGrids{
height: auto;
float:left;
margin: 1% 0%;
display:block;
}
.grid1{
width: 100%;
margin:1% 0;
}
.grid70{
width: 66%;
}
.header{
position: fixed;
top: 0;
left:0;
width:100%;
z-index: 100000;
padding:0;
height: auto;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.header input{
display:none;
}
.header .floatWrapper .grid70{
float:right;
}
.navigation{
margin:0;
padding: 0;
}
.navigation li{
float:left;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
width: 24%;
margin-left: .3%;
padding-top:0;
border-radius: 0 0 10px 10px;
}
.navigation li:nth-child(odd) a{
background: orange;
}
.navigation li a{
display: block;
color: black;
background-color: lightblue;
text-decoration: none;
word-wrap: normal;
padding-right: 8%;
height:4em;
line-height: 5.5em;
text-align : right;
border-radius: 0 0 10px 10px;
-moz-transition-proprety: background-color height;
-moz-transition-duration : 1s;
-webkit-transition-proprety: background-color height;
-webkit-transition-duration : 1s;
-ms-transition-proprety: background-color height;
-ms-transition-duration : 1s;
-o-transition-proprety: background-color height;
-o-transition-duration : 1s;
transition-proprety: background-color height;
transition-duration : 1s;
}
.navigation li:hover a{
box-shadow: 1px 2px 4px black;
height:6em;
line-height: 8.5em;
-moz-transition-proprety: background-color height;
-moz-transition-duration : 1s;
-webkit-transition-proprety: background-color height;
-webkit-transition-duration : 1s;
-ms-transition-proprety: background-color height;
-ms-transition-duration : 1s;
-o-transition-proprety: background-color height;
-o-transition-duration : 1s;
transition-proprety: background-color height;
transition-duration : 1s;
}
#media screen and (max-width: 769px) {
.header{
padding:0;
position:fixed;
background-color: #22313F;
border-top:none;
}
.header .floatWrapper{
padding-top: 1em;
padding-bottom: 1em;
position: relative;
z-index:15000;
width: 100%;
}
.header .floatWrapper .grid70{
width: 2em;
height: 2em;
padding:0;
float:right;
margin-right: 5%;
}
.header .floatWrapper .grid70 input{
display:block;
color:#22313F;
width: 100%;
height: 100%;
background-color: #6C7A89;
padding:0;
margin: 0;
}
.header .floatWrapper .grid70 .navigation{
position:absolute;
top:70%;
left:0%;
display:none;
padding-top: 15px;
}
.header .floatWrapper .grid70:hover .navigation {
max-height: 1000px;
display:block;
}
.navigation li{
width: 100%;
padding:0;
border-radius:0;
margin-left: 0;
}
.navigation li a {
text-align: left;
height: auto;
line-height: 40px;
border-radius:0;
word-wrap:break-word;
padding:1.5%;
font-size: 18px;
}
.navigation li:hover a{
box-shadow: none;
color:black;
height: auto;
line-height: 40px;
}
}
JavaScript
var is_touch_device = 'ontouchstart' in document.documentElement;
if(is_touch_device){
//code for touch devices
function toggle(navi) {
var tag=document.getElementById("navi");
tag.style.display = tag.style.display === 'block' ? 'none' : 'block';
// set as defaut oposite defaut active value in document
// here defaut is set to block cause it is none in CSS
}
}
I am very well aware that what is causing problems is non other than this very JS snippet. On mobile, it works like a charm.
As the hover is still enabled on .grid70 it works on Desktops browsers aswell, but only on Firefox. Chrome, IE and Opera detect the touch and make the nav unusable after a few clicks (when window is resized).
Here is a JSbin : http://jsbin.com/ziqij/1/edit?html,css,js,output
The reason hover is still working is because I thought the touchscreen detection would work ... and wanted to go with hover on desktop / onclick on mobile.
I realize now, I'd better use a click only solution and account for desktop touchscreens aswell.
Any help / insight would de greatly appreciated.
Desperately,
Phil

Line Displacement with fadein

I'm kind of stuck on creating a fadeIn of strings. What I want to do is have a bar appear next to a string when the user hovers over it. Like this:
| string
But the thing is, when the | appears, there is a displacement of the string to the right, how would I go about fixing this problem? This is my current CSS and Java code.
.details{
font-size: 2.1em;
font-weight: bold;
line-height: 5em;
/*display:none;*/
}
.line{
border-style:solid;
border-left: double-thick;
border-color: #336699;
display: none;
margin-right: .4em;
}
JS:
$(document).ready(function(){
$('.details').mouseenter(function(){
$('.line').remove();
$(this).prepend('<a class="line"></a>');
$('.line').fadeIn(250);
});
$('.details').mouseleave(function(){
$('.line').fadeOut(250);
});
});

Assuming each row (parent element of .line and .details) is relative-positioned, try this
.details{
font-size: 2.1em;
font-weight: bold;
line-height: 5em;
position: relative;
left: 10px; /*play with this*/
/*display:none;*/
}
.line{
border-style:solid;
border-left: double-thick;
border-color: #336699;
position: absolute; /* */
left: 0px; /* */
display: none;
margin-right: .4em;
}
This will push the details element 10px or however much space is needed while preventing the line element from pushing the details

Done without any JavaScript, can you believe it?
Fiddle
p::before {
content: '|';
position: absolute;
margin-left: -5px;
opacity: 0;
transition: opacity 250ms;
}
p:hover::before {
opacity: 1;
}
Ahhh, the power of CSS3

Full height doesn't work of Overlay

Live site- http://uposonghar.com/new-video/
There is a Embeded YouTube video, if you mouse over on that video(center of the video) Facebook + Twitter share button appears on the left, like this-
But that is only working when anyone mouse over center part of embedded YouTube video box, not in whole part. I want to style it like when anyone when mouse over the video box(no matter where) share button appears, share button will be alignment center vertically i any video box height.
My code-
HTML-
<div id="video-container">
<iframe src="//www.youtube.com/embed/-Jkd9GDSyPc" width="600" height="400" allowfullscreen="" frameborder="0"></iframe>
<ul class="share-video-overlay" id="share-video-overlay">
<li class="facebook" id="facebook">Facebook</li>
<li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check+this+video&url=http%3A//www.youtube.com/watch%3Fv%3D-Jkd9GDSyPc">Tweet</a</li>
</ul>
</div>
CSS-
#share-video-overlay {
position: relative;
top: -225px;
list-style-type: none;
display: block;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .4s, top .25s;
-moz-transition: opacity .4s, top .25s;
-o-transition: opacity .4s, top .25s;
transition: opacity .4s, top .25s;
z-index: 500;
}
#share-video-overlay:hover {
opacity:1;
filter:alpha(opacity=100);
}
.share-video-overlay li {
margin: 5px 0px 5px 0px;
}
#facebook {
color: #ffffff;
background-color: #3e5ea1;
width: 70px;
padding: 5px;
}
.facebook a:link, .facebook a:active, .facebook a:visited {
color:#fff;
text-decoration:none;
}
#twitter {
background-color:#00a6d4;
width: 70px;
padding: 5px;
}
.twitter a, .twitter a:link, .twitter a:active, .twitter a:visited, .twitter a:hover {
color:#FFF;
text-decoration:none;
}

I rewrote your CSS, perhaps this is what you need?
#video-container {
display: block;
position: relative;
width: 600px; //set the video container to the same width/height as the embedded video
height: 400px;
}
#video-container:after {
clear: both;
}
#share-video-overlay {
display: none;
position: absolute; //absolute positioning to force the element over the iframe
lef: 0;
top: 225px;
}
#video-container:hover #share-video-overlay {
display: block; //clear the float. See http://www.positioniseverything.net/easyclearing.html
}
.share-video-overlay li {
margin: 5px 0px 5px 0px;
}
#facebook {
color: #ffffff;
background-color: #3e5ea1;
width: 70px;
padding: 5px;
}
.facebook a:link, .facebook a:active, .facebook a:visited {
color:#fff;
text-decoration:none;
}
#twitter {
background-color:#00a6d4;
width: 70px;
padding: 5px;
}
.twitter a, .twitter a:link, .twitter a:active, .twitter a:visited, .twitter a:hover {
color:#FFF;
text-decoration:none;
}
In a nutshell: set the container to match the width/height of the youtube video, then position the overlay using absolute positioning. Because it is inside the video container, it will position itself inside the limits of the container.
And: set the hover on the video container, and not the overlay. As said, the overlay is inside the container, so you can easily make the overlay visible on a hover on the container. (#video-container:hover #share-video-overlay { })
I have put the example in a Fiddle so you can test if this is what you need.

Its because of the height of the share-video-overlay class. Increase height of this class you will get the result. Change the css of share-video-overlay like this
top:-435px;
padding-top:215px;
Set this css as you want and give height to share-video-overlay class height:500px; .
I am sure it will work.