Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*SLIDE IN FROM LEFT*/
- a {
- color:#6d7fff;
- text-decoration:none;
- position:relative;
- -webkit-transition: all 0.4s ease-in-out;
- -moz-transition: all 0.4s ease-in-out;
- -o-transition: all 0.4s ease-in-out;
- transition: all 0.4s ease-in-out;
- }
- a:hover {
- color:#000;
- }
- a:after {
- content:'';
- position:absolute;
- bottom:0;
- left:0;
- width:0%;
- border-bottom:1px solid #000;
- transition:0.4s;
- }
- a:hover:after {
- width:100%;
- }
- /*SLIDE IN FROM RIGHT*/
- a {
- color:#6d7fff;
- display: inline-block;
- position: relative;
- text-decoration:none;
- -webkit-transition: all 0.4s ease-in-out;
- -moz-transition: all 0.4s ease-in-out;
- -o-transition: all 0.4s ease-in-out;
- transition: all 0.4s ease-in-out;
- }
- a:hover {
- color:#000;
- }
- a:after {
- content: '';
- display: block;
- position: absolute;
- right: 0;
- bottom: 0;
- height: 1px;
- width: 0;
- background: transparent;
- transition: width .5s ease, background-color .5s ease;
- }
- a:hover:after {
- width: 100%;
- background:#000;
- }
- /*SLIDE IN AND OFF*/
- a {
- color:#6d7fff;
- text-decoration:none;
- position:relative;
- -webkit-transition: all 0.4s ease-in-out;
- -moz-transition: all 0.4s ease-in-out;
- -o-transition: all 0.4s ease-in-out;
- transition: all 0.4s ease-in-out;
- }
- a:hover {
- color:#000;
- }
- a:before {
- content: '';
- display: block;
- position: absolute;
- left: 0;
- bottom: 0;
- height: 3px;
- width: 0;
- transition: width 0s ease, border-bottom .5s ease;
- }
- a:after {
- content: '';
- display: block;
- position: absolute;
- right: 0;
- bottom: 0;
- height: 3px;
- width: 0;
- border-bottom: 1px solid #000;
- transition: width .5s ease;
- }
- a:hover:before {
- width: 100%;
- border-bottom: 1px solid #000;
- transition: width .5s ease;
- }
- a:hover:after {
- width: 100%;
- border-bottom: transparent;
- transition: all 0s ease;
- }
- /*SLIDE MIDDLE OUT*/
- a {
- color:#6d7fff;
- display: inline-block;
- position: relative;
- text-decoration:none;
- }
- a:hover {
- color:#000;
- }
- a:after {
- content: '';
- display: block;
- margin: auto;
- height: 1px;
- width: 0px;
- background: transparent;
- transition: width .5s ease, background-color .5s ease;
- }
- a:hover:after {
- width: 100%;
- background: #000;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement