Skip to content

Instantly share code, notes, and snippets.

@alexortiz201
Last active August 29, 2015 13:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alexortiz201/9977747 to your computer and use it in GitHub Desktop.
Save alexortiz201/9977747 to your computer and use it in GitHub Desktop.
Class to do the a circle transition hover
#header .navToggle {height: 40px; width:40px; padding: 0; background: #043669; float:right; margin:35px 0 15px;
font-size: 32px;line-height:36px; color:#fff;
border: 2px solid #1589FF;
-webkit-border-radius: 90px;
-moz-border-radius: 90px;
border-radius: 90px;
transition: background-color 0.5s ease;
}
#header .navToggle:hover {cursor: pointer; background: #1589FF;}
#header .navToggle.openNav { border: 2px solid #043669;background: #1589FF!important;}
#header .navToggle .innerCircle{height: 40%; width: 40%;background:#fff; margin: 0 auto;
-webkit-border-radius: 90px;
-moz-border-radius: 90px;
border-radius: 90px;
transition: all 0.5s ease;
}
#header .navToggle .innerCircle:hover{height: 100%!important; width: 100%!important;border: 2px solid #043669;background:#043669!important;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment