Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created Mar 24, 2019
Embed
What would you like to do?
Pull-Out Search Bar Concept
<!--Copyright - Asna Farid Siddiqui - Vector Tales-->
<!--www.twitter.com/asna_farid-->
<!--Click on the magnifying glass icon to pull out -->
<a href="#"></a>
<i>Pull-Out Search Bar Concept<i>
@import "compass";
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Exo+2:400,900,800,700,600,500,300,200,100);
body{
background: #f68674;
font-family: 'Exo 2';
font-weight: 100;
text-align: center;
}
a{
position: relative;
display: inline-block;
width: 40px;
height: 40px;
border: 3px solid #fff;
margin: 60px 0;
@include border-radius(40px);
text-decoration: none;
background: none;
z-index:2;
&::before{
content: "";
display: inline-block;
width: 30px;
height: 3px;
position: absolute;
top: 40px;
left: 34px;
background: #fff;
@include border-radius(20px);
@include rotate(30deg);
}
&:focus{
width: 180px;
@include transition-property(width);
@include transition-duration(0.8s);
@include transition-timing-function(cubic-bezier(0.68, -0.55, 0.265, 1.55));
outline: 0;
&::before{
width: 0;
top: 20px;
left: 190px;
@include rotate(0deg);
@include transition-property(width, left);
@include transition-duration(0.6s);
// @include transition-timing-function(cubic-bezier(0.785, 0.135, 0.15, 0.86));
@include transition-timing-function(cubic-bezier(1,-0.28,0,.9));
}
}
}
i{
display: block;
width: 500px;
color: #fff;
font-size: 48px;
margin: 0 auto;
font-style: normal;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.