devol
/
LinkStack
mirror of https://github.com/LinkStackOrg/LinkStack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added button animation home 

Added hover button animation to home.blade.php.

  -  Included hover-min.css for animation
  -  Added class 'button hvr-grow' to all buttons
  -  Added class 'hvr-icon-wobble-vertical' to all buttons (for icon animation)
  -  Added class 'hvr-icon' to all icons (to indicate icon to hover-min.css)

Read more on how to use and change animations here: https://github.com/IanLunn/Hover/blob/master/README.md
Try a demo of the added animations here: https://julianprieber.github.io/littlelink-admin-demo/
This commit is contained in:
JulianPrieber 2022-02-12 19:25:37 +01:00 committed by GitHub
parent a58f412cc5
commit c5657f778c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
resources/views/home.blade.php
View File

@ -8,6 +8,7 @@
<link rel="stylesheet" href="{{ asset('littlelink/css/normalize.css') }}"> <link rel="stylesheet" href="{{ asset('littlelink/css/normalize.css') }}">
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-light.css') }}"> <link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-light.css') }}">
<link rel="stylesheet" href="{{ asset('littlelink/css/brands.css') }}"> <link rel="stylesheet" href="{{ asset('littlelink/css/brands.css') }}">
<link rel="stylesheet" href="{{ asset('littlelink/css/hover-min.css') }}">
<link rel="icon" type="image/png" href="{{ asset('littlelink/images/avatar.png') }}"> <link rel="icon" type="image/png" href="{{ asset('littlelink/images/avatar.png') }}">
</head> </head>
<body> <body>
@ -39,9 +40,9 @@
<!-- Replace # with your profile URL. Delete whatever you don't need & create your own brand styles in css/brands.css --> <!-- Replace # with your profile URL. Delete whatever you don't need & create your own brand styles in css/brands.css -->
<a class="button button-github" href="#"><img class="icon" src="{{ asset('littlelink/icons/github.svg') }}">Github</a> <a class="button button-github button hvr-grow hvr-icon-wobble-vertical" href="#"><img class="icon hvr-icon" src="{{ asset('littlelink/icons/github.svg') }}">Github</a>
<a class="button button-twitter" href="#"><img class="icon" src="{{ asset('littlelink/icons/twitter.svg') }}">Twitter</a> <a class="button button-twitter button hvr-grow hvr-icon-wobble-vertical" href="#"><img class="icon hvr-icon" src="{{ asset('littlelink/icons/twitter.svg') }}">Twitter</a>
<a class="button button-instagram" href="#"><img class="icon" src="{{ asset('littlelink/icons/instagram.svg') }}">Instagram</a> <a class="button button-instagram button hvr-grow hvr-icon-wobble-vertical" href="#"><img class="icon hvr-icon" src="{{ asset('littlelink/icons/instagram.svg') }}">Instagram</a>
<!--<a class="button button-pinterest" href="#"><img class="icon" src="{{ asset('littlelink/icons/pinterest.svg') }}">Pinterest</a>--> <!--<a class="button button-pinterest" href="#"><img class="icon" src="{{ asset('littlelink/icons/pinterest.svg') }}">Pinterest</a>-->
</br></br> </br></br>