Added button animation littlelink

Added hover button animation to littlelink.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:24:01 +01:00 committed by GitHub
parent 5e2a3fbbe8
commit a58f412cc5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 3 deletions

View File

@ -39,6 +39,7 @@
<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/brands.css') }}">
<link rel="stylesheet" href="{{ asset('littlelink/css/hover-min.css') }}">
<link rel="icon" type="image/png" href="{{ asset('littlelink/images/avatar.png') }}">
<style>
.container { max-width: 1080px !important; }
@ -80,14 +81,14 @@
@foreach($links as $link)
@php $linkName = str_replace('default ','',$link->name) @endphp
@if($link->button_id === 0)
<a class="button button-title" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank">
<a class="button button-title button hvr-grow hvr-icon-wobble-vertical" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank">
{{ $link->title }}</a>
<br>
@elseif($link->name === "custom")
<a class="button button-{{ $link->name }}" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img class="icon" src="{{ asset('\/littlelink/icons\/') . $linkName }}.svg">{{ $link->title }}</a>
<a class="button button-{{ $link->name }} button hvr-grow hvr-icon-wobble-vertical" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/') . $linkName }}.svg">{{ $link->title }}</a>
<br>
@else
<a class="button button-{{ $link->name }}" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img class="icon" src="{{ asset('\/littlelink/icons\/') . $linkName }}.svg">{{ ucfirst($linkName) }}</a>
<a class="button button-{{ $link->name }} button hvr-grow hvr-icon-wobble-vertical" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/') . $linkName }}.svg">{{ ucfirst($linkName) }}</a>
<br>
@endif
@endforeach