-
Notifications
You must be signed in to change notification settings - Fork 60
/
buttons.html
1359 lines (1351 loc) · 66 KB
/
buttons.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="assets/images/favicon.svg" type="image/x-icon" />
<title>Button | PlainAdmin Demo</title>
<!-- ========== All CSS files linkup ========= -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/lineicons.css" />
<link rel="stylesheet" href="assets/css/materialdesignicons.min.css" />
<link rel="stylesheet" href="assets/css/fullcalendar.css" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<!-- ======== Preloader =========== -->
<div id="preloader">
<div class="spinner"></div>
</div>
<!-- ======== Preloader =========== -->
<!-- ======== sidebar-nav start =========== -->
<aside class="sidebar-nav-wrapper">
<div class="navbar-logo">
<a href="index.html">
<img src="assets/images/logo/logo.svg" alt="logo" />
</a>
</div>
<nav class="sidebar-nav">
<ul>
<li class="nav-item nav-item-has-children">
<a
href="#0"
class="collapsed"
data-bs-toggle="collapse"
data-bs-target="#ddmenu_1"
aria-controls="ddmenu_1"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.74999 18.3333C12.2376 18.3333 15.1364 15.8128 15.7244 12.4941C15.8448 11.8143 15.2737 11.25 14.5833 11.25H9.99999C9.30966 11.25 8.74999 10.6903 8.74999 10V5.41666C8.74999 4.7263 8.18563 4.15512 7.50586 4.27556C4.18711 4.86357 1.66666 7.76243 1.66666 11.25C1.66666 15.162 4.83797 18.3333 8.74999 18.3333Z" />
<path
d="M17.0833 10C17.7737 10 18.3432 9.43708 18.2408 8.75433C17.7005 5.14918 14.8508 2.29947 11.2457 1.75912C10.5629 1.6568 10 2.2263 10 2.91665V9.16666C10 9.62691 10.3731 10 10.8333 10H17.0833Z" />
</svg>
</span>
<span class="text">Dashboard</span>
</a>
<ul id="ddmenu_1" class="collapse dropdown-nav">
<li>
<a href="index.html"> eCommerce </a>
</li>
</ul>
</li>
<li class="nav-item nav-item-has-children">
<a
href="#0"
class="collapsed"
data-bs-toggle="collapse"
data-bs-target="#ddmenu_2"
aria-controls="ddmenu_2"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11.8097 1.66667C11.8315 1.66667 11.8533 1.6671 11.875 1.66796V4.16667C11.875 5.43232 12.901 6.45834 14.1667 6.45834H16.6654C16.6663 6.48007 16.6667 6.50186 16.6667 6.5237V16.6667C16.6667 17.5872 15.9205 18.3333 15 18.3333H5.00001C4.07954 18.3333 3.33334 17.5872 3.33334 16.6667V3.33334C3.33334 2.41286 4.07954 1.66667 5.00001 1.66667H11.8097ZM6.66668 7.70834C6.3215 7.70834 6.04168 7.98816 6.04168 8.33334C6.04168 8.67851 6.3215 8.95834 6.66668 8.95834H10C10.3452 8.95834 10.625 8.67851 10.625 8.33334C10.625 7.98816 10.3452 7.70834 10 7.70834H6.66668ZM6.04168 11.6667C6.04168 12.0118 6.3215 12.2917 6.66668 12.2917H13.3333C13.6785 12.2917 13.9583 12.0118 13.9583 11.6667C13.9583 11.3215 13.6785 11.0417 13.3333 11.0417H6.66668C6.3215 11.0417 6.04168 11.3215 6.04168 11.6667ZM6.66668 14.375C6.3215 14.375 6.04168 14.6548 6.04168 15C6.04168 15.3452 6.3215 15.625 6.66668 15.625H13.3333C13.6785 15.625 13.9583 15.3452 13.9583 15C13.9583 14.6548 13.6785 14.375 13.3333 14.375H6.66668Z" />
<path
d="M13.125 2.29167L16.0417 5.20834H14.1667C13.5913 5.20834 13.125 4.74197 13.125 4.16667V2.29167Z" />
</svg>
</span>
<span class="text">Pages</span>
</a>
<ul id="ddmenu_2" class="collapse dropdown-nav">
<li>
<a href="settings.html"> Settings </a>
</li>
<li>
<a href="blank-page.html"> Blank Page </a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="inv'">
<span class="icon">
<svg
width="22"
height="22"
viewBox="0 0 22 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.4166 7.33333C18.9383 7.33333 20.1666 8.56167 20.1666 10.0833V15.5833H16.4999V19.25H5.49992V15.5833H1.83325V10.0833C1.83325 8.56167 3.06159 7.33333 4.58325 7.33333H5.49992V2.75H16.4999V7.33333H17.4166ZM7.33325 4.58333V7.33333H14.6666V4.58333H7.33325ZM14.6666 17.4167V13.75H7.33325V17.4167H14.6666ZM16.4999 13.75H18.3333V10.0833C18.3333 9.57917 17.9208 9.16667 17.4166 9.16667H4.58325C4.07909 9.16667 3.66659 9.57917 3.66659 10.0833V13.75H5.49992V11.9167H16.4999V13.75ZM17.4166 10.5417C17.4166 11.0458 17.0041 11.4583 16.4999 11.4583C15.9958 11.4583 15.5833 11.0458 15.5833 10.5417C15.5833 10.0375 15.9958 9.625 16.4999 9.625C17.0041 9.625 17.4166 10.0375 17.4166 10.5417Z"
/>
</svg>
</span>
<span class="text">Invoice</span>
</a>
</li>
<li class="nav-item nav-item-has-children">
<a
href="#0"
class="collapsed"
data-bs-toggle="collapse"
data-bs-target="#ddmenu_3"
aria-controls="ddmenu_3"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M14.9211 10.1294C15.1652 9.88534 15.1652 9.48967 14.9211 9.24559L10.7544 5.0789C10.5103 4.83482 10.1147 4.83482 9.87057 5.0789C9.62649 5.32297 9.62649 5.71871 9.87057 5.96278L12.9702 9.06251H1.97916C1.63398 9.06251 1.35416 9.34234 1.35416 9.68751C1.35416 10.0327 1.63398 10.3125 1.97916 10.3125H12.9702L9.87057 13.4123C9.62649 13.6563 9.62649 14.052 9.87057 14.2961C10.1147 14.5402 10.5103 14.5402 10.7544 14.2961L14.9211 10.1294Z" />
<path
d="M11.6383 15.18L15.805 11.0133C16.5373 10.2811 16.5373 9.09391 15.805 8.36166L11.6383 4.195C11.2722 3.82888 10.7923 3.64582 10.3125 3.64582V3.02082C10.3125 2.10035 11.0587 1.35416 11.9792 1.35416H16.9792C17.8997 1.35416 18.6458 2.10035 18.6458 3.02082V16.3542C18.6458 17.2747 17.8997 18.0208 16.9792 18.0208H11.9792C11.0587 18.0208 10.3125 17.2747 10.3125 16.3542V15.7292C10.7923 15.7292 11.2722 15.5461 11.6383 15.18Z" />
</svg>
</span>
<span class="text">Auth</span>
</a>
<ul id="ddmenu_3" class="collapse dropdown-nav">
<li>
<a href="signin.html"> Sign In </a>
</li>
<li>
<a href="signup.html"> Sign Up </a>
</li>
</ul>
</li>
<span class="divider"><hr /></span>
<li class="nav-item nav-item-has-children">
<a
href="#0"
class=""
data-bs-toggle="collapse"
data-bs-target="#ddmenu_4"
aria-controls="ddmenu_4"
aria-expanded="true"
aria-label="Toggle navigation"
>
<span class="icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M1.66666 5.41669C1.66666 3.34562 3.34559 1.66669 5.41666 1.66669C7.48772 1.66669 9.16666 3.34562 9.16666 5.41669C9.16666 7.48775 7.48772 9.16669 5.41666 9.16669C3.34559 9.16669 1.66666 7.48775 1.66666 5.41669Z" />
<path
d="M1.66666 14.5834C1.66666 12.5123 3.34559 10.8334 5.41666 10.8334C7.48772 10.8334 9.16666 12.5123 9.16666 14.5834C9.16666 16.6545 7.48772 18.3334 5.41666 18.3334C3.34559 18.3334 1.66666 16.6545 1.66666 14.5834Z" />
<path
d="M10.8333 5.41669C10.8333 3.34562 12.5123 1.66669 14.5833 1.66669C16.6544 1.66669 18.3333 3.34562 18.3333 5.41669C18.3333 7.48775 16.6544 9.16669 14.5833 9.16669C12.5123 9.16669 10.8333 7.48775 10.8333 5.41669Z" />
<path
d="M10.8333 14.5834C10.8333 12.5123 12.5123 10.8334 14.5833 10.8334C16.6544 10.8334 18.3333 12.5123 18.3333 14.5834C18.3333 16.6545 16.6544 18.3334 14.5833 18.3334C12.5123 18.3334 10.8333 16.6545 10.8333 14.5834Z" />
</svg>
</span>
<span class="text">UI Elements </span>
</a>
<ul id="ddmenu_4" class="collapsed show dropdown-nav">
<li>
<a href="alerts.html"> Alerts </a>
</li>
<li>
<a href="buttons.html" class="active"> Buttons </a>
</li>
<li>
<a href="cards.html"> Cards </a>
</li>
<li>
<a href="typography.html"> Typography </a>
</li>
</ul>
</li>
<li class="nav-item nav-item-has-children">
<a
href="#0"
class="collapsed"
data-bs-toggle="collapse"
data-bs-target="#ddmenu_55"
aria-controls="ddmenu_55"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.48663 1.1466C5.77383 0.955131 6.16188 1.03274 6.35335 1.31994L6.87852 2.10769C7.20508 2.59755 7.20508 3.23571 6.87852 3.72556L6.35335 4.51331C6.16188 4.80052 5.77383 4.87813 5.48663 4.68666C5.19943 4.49519 5.12182 4.10715 5.31328 3.81994L5.83845 3.03219C5.88511 2.96221 5.88511 2.87105 5.83845 2.80106L5.31328 2.01331C5.12182 1.72611 5.19943 1.33806 5.48663 1.1466Z" />
<path
d="M2.49999 5.83331C2.03976 5.83331 1.66666 6.2064 1.66666 6.66665V10.8333C1.66666 13.5948 3.90523 15.8333 6.66666 15.8333H9.99999C12.1856 15.8333 14.0436 14.431 14.7235 12.4772C14.8134 12.4922 14.9058 12.5 15 12.5H16.6667C17.5872 12.5 18.3333 11.7538 18.3333 10.8333V8.33331C18.3333 7.41284 17.5872 6.66665 16.6667 6.66665H15C15 6.2064 14.6269 5.83331 14.1667 5.83331H2.49999ZM14.9829 11.2496C14.9942 11.1123 15 10.9735 15 10.8333V7.91665H16.6667C16.8967 7.91665 17.0833 8.10319 17.0833 8.33331V10.8333C17.0833 11.0634 16.8967 11.25 16.6667 11.25H15L14.9898 11.2498L14.9829 11.2496Z" />
<path
d="M8.85332 1.31994C8.6619 1.03274 8.27383 0.955131 7.98663 1.1466C7.69943 1.33806 7.62182 1.72611 7.81328 2.01331L8.33848 2.80106C8.38507 2.87105 8.38507 2.96221 8.33848 3.03219L7.81328 3.81994C7.62182 4.10715 7.69943 4.49519 7.98663 4.68666C8.27383 4.87813 8.6619 4.80052 8.85332 4.51331L9.37848 3.72556C9.70507 3.23571 9.70507 2.59755 9.37848 2.10769L8.85332 1.31994Z" />
<path
d="M10.4867 1.1466C10.7738 0.955131 11.1619 1.03274 11.3533 1.31994L11.8785 2.10769C12.2051 2.59755 12.2051 3.23571 11.8785 3.72556L11.3533 4.51331C11.1619 4.80052 10.7738 4.87813 10.4867 4.68666C10.1994 4.49519 10.1218 4.10715 10.3133 3.81994L10.8385 3.03219C10.8851 2.96221 10.8851 2.87105 10.8385 2.80106L10.3133 2.01331C10.1218 1.72611 10.1994 1.33806 10.4867 1.1466Z" />
<path
d="M2.49999 16.6667C2.03976 16.6667 1.66666 17.0398 1.66666 17.5C1.66666 17.9602 2.03976 18.3334 2.49999 18.3334H14.1667C14.6269 18.3334 15 17.9602 15 17.5C15 17.0398 14.6269 16.6667 14.1667 16.6667H2.49999Z" />
</svg>
</span>
<span class="text">Icons</span>
</a>
<ul id="ddmenu_55" class="collapse dropdown-nav">
<li>
<a href="icons.html"> LineIcons </a>
</li>
<li>
<a href="mdi-icons.html"> MDI Icons </a>
</li>
</ul>
</li>
<li class="nav-item nav-item-has-children">
<a
href="#0"
class="collapsed"
data-bs-toggle="collapse"
data-bs-target="#ddmenu_5"
aria-controls="ddmenu_5"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M4.16666 3.33335C4.16666 2.41288 4.91285 1.66669 5.83332 1.66669H14.1667C15.0872 1.66669 15.8333 2.41288 15.8333 3.33335V16.6667C15.8333 17.5872 15.0872 18.3334 14.1667 18.3334H5.83332C4.91285 18.3334 4.16666 17.5872 4.16666 16.6667V3.33335ZM6.04166 5.00002C6.04166 5.3452 6.32148 5.62502 6.66666 5.62502H13.3333C13.6785 5.62502 13.9583 5.3452 13.9583 5.00002C13.9583 4.65485 13.6785 4.37502 13.3333 4.37502H6.66666C6.32148 4.37502 6.04166 4.65485 6.04166 5.00002ZM6.66666 6.87502C6.32148 6.87502 6.04166 7.15485 6.04166 7.50002C6.04166 7.8452 6.32148 8.12502 6.66666 8.12502H13.3333C13.6785 8.12502 13.9583 7.8452 13.9583 7.50002C13.9583 7.15485 13.6785 6.87502 13.3333 6.87502H6.66666ZM6.04166 10C6.04166 10.3452 6.32148 10.625 6.66666 10.625H9.99999C10.3452 10.625 10.625 10.3452 10.625 10C10.625 9.65485 10.3452 9.37502 9.99999 9.37502H6.66666C6.32148 9.37502 6.04166 9.65485 6.04166 10ZM9.99999 16.6667C10.9205 16.6667 11.6667 15.9205 11.6667 15C11.6667 14.0795 10.9205 13.3334 9.99999 13.3334C9.07949 13.3334 8.33332 14.0795 8.33332 15C8.33332 15.9205 9.07949 16.6667 9.99999 16.6667Z" />
</svg>
</span>
<span class="text"> Forms </span>
</a>
<ul id="ddmenu_5" class="collapse dropdown-nav">
<li>
<a href="form-elements.html"> Form Elements </a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="tables.html">
<span class="icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M1.66666 4.16667C1.66666 3.24619 2.41285 2.5 3.33332 2.5H16.6667C17.5872 2.5 18.3333 3.24619 18.3333 4.16667V9.16667C18.3333 10.0872 17.5872 10.8333 16.6667 10.8333H3.33332C2.41285 10.8333 1.66666 10.0872 1.66666 9.16667V4.16667Z" />
<path
d="M1.875 13.75C1.875 13.4048 2.15483 13.125 2.5 13.125H17.5C17.8452 13.125 18.125 13.4048 18.125 13.75C18.125 14.0952 17.8452 14.375 17.5 14.375H2.5C2.15483 14.375 1.875 14.0952 1.875 13.75Z" />
<path
d="M2.5 16.875C2.15483 16.875 1.875 17.1548 1.875 17.5C1.875 17.8452 2.15483 18.125 2.5 18.125H17.5C17.8452 18.125 18.125 17.8452 18.125 17.5C18.125 17.1548 17.8452 16.875 17.5 16.875H2.5Z" />
</svg>
</span>
<span class="text">Tables</span>
</a>
</li>
<span class="divider"><hr /></span>
<li class="nav-item">
<a href="notification.html">
<span class="icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.8333 2.50008C10.8333 2.03984 10.4602 1.66675 9.99999 1.66675C9.53975 1.66675 9.16666 2.03984 9.16666 2.50008C9.16666 2.96032 9.53975 3.33341 9.99999 3.33341C10.4602 3.33341 10.8333 2.96032 10.8333 2.50008Z" />
<path
d="M17.5 5.41673C17.5 7.02756 16.1942 8.33339 14.5833 8.33339C12.9725 8.33339 11.6667 7.02756 11.6667 5.41673C11.6667 3.80589 12.9725 2.50006 14.5833 2.50006C16.1942 2.50006 17.5 3.80589 17.5 5.41673Z" />
<path
d="M11.4272 2.69637C10.9734 2.56848 10.4947 2.50006 10 2.50006C7.10054 2.50006 4.75003 4.85057 4.75003 7.75006V9.20873C4.75003 9.72814 4.62082 10.2393 4.37404 10.6963L3.36705 12.5611C2.89938 13.4272 3.26806 14.5081 4.16749 14.9078C7.88074 16.5581 12.1193 16.5581 15.8326 14.9078C16.732 14.5081 17.1007 13.4272 16.633 12.5611L15.626 10.6963C15.43 10.3333 15.3081 9.93606 15.2663 9.52773C15.0441 9.56431 14.8159 9.58339 14.5833 9.58339C12.2822 9.58339 10.4167 7.71791 10.4167 5.41673C10.4167 4.37705 10.7975 3.42631 11.4272 2.69637Z" />
<path
d="M7.48901 17.1925C8.10004 17.8918 8.99841 18.3335 10 18.3335C11.0016 18.3335 11.9 17.8918 12.511 17.1925C10.8482 17.4634 9.15183 17.4634 7.48901 17.1925Z" />
</svg>
</span>
<span class="text">Notifications</span>
</a>
</li>
</ul>
</nav>
<div class="promo-box">
<div class="promo-icon">
<img class="mx-auto" src="./assets/images/logo/logo-icon-big.svg" alt="Logo">
</div>
<h3>Upgrade to PRO</h3>
<p>Improve your development process and start doing more with PlainAdmin PRO!</p>
<a href="https://plainadmin.com/pro" target="_blank" rel="nofollow" class="main-btn primary-btn btn-hover">
Upgrade to PRO
</a>
</div>
</aside>
<div class="overlay"></div>
<!-- ======== sidebar-nav end =========== -->
<!-- ======== main-wrapper start =========== -->
<main class="main-wrapper">
<!-- ========== header start ========== -->
<header class="header">
<div class="container-fluid">
<div class="row">
<div class="col-lg-5 col-md-5 col-6">
<div class="header-left d-flex align-items-center">
<div class="menu-toggle-btn mr-15">
<button id="menu-toggle" class="main-btn primary-btn btn-hover">
<i class="lni lni-chevron-left me-2"></i> Menu
</button>
</div>
<div class="header-search d-none d-md-flex">
<form action="#">
<input type="text" placeholder="Search..." />
<button><i class="lni lni-search-alt"></i></button>
</form>
</div>
</div>
</div>
<div class="col-lg-7 col-md-7 col-6">
<div class="header-right">
<!-- notification start -->
<div class="notification-box ml-15 d-none d-md-flex">
<button class="dropdown-toggle" type="button" id="notification" data-bs-toggle="dropdown"
aria-expanded="false">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11 20.1667C9.88317 20.1667 8.88718 19.63 8.23901 18.7917H13.761C13.113 19.63 12.1169 20.1667 11 20.1667Z"
fill="" />
<path
d="M10.1157 2.74999C10.1157 2.24374 10.5117 1.83333 11 1.83333C11.4883 1.83333 11.8842 2.24374 11.8842 2.74999V2.82604C14.3932 3.26245 16.3051 5.52474 16.3051 8.24999V14.287C16.3051 14.5301 16.3982 14.7633 16.564 14.9352L18.2029 16.6342C18.4814 16.9229 18.2842 17.4167 17.8903 17.4167H4.10961C3.71574 17.4167 3.5185 16.9229 3.797 16.6342L5.43589 14.9352C5.6017 14.7633 5.69485 14.5301 5.69485 14.287V8.24999C5.69485 5.52474 7.60672 3.26245 10.1157 2.82604V2.74999Z"
fill="" />
</svg>
<span></span>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="notification">
<li>
<a href="#0">
<div class="image">
<img src="assets/images/lead/lead-6.png" alt="" />
</div>
<div class="content">
<h6>
John Doe
<span class="text-regular">
comment on a product.
</span>
</h6>
<p>
Lorem ipsum dolor sit amet, consect etur adipiscing
elit Vivamus tortor.
</p>
<span>10 mins ago</span>
</div>
</a>
</li>
<li>
<a href="#0">
<div class="image">
<img src="assets/images/lead/lead-1.png" alt="" />
</div>
<div class="content">
<h6>
Jonathon
<span class="text-regular">
like on a product.
</span>
</h6>
<p>
Lorem ipsum dolor sit amet, consect etur adipiscing
elit Vivamus tortor.
</p>
<span>10 mins ago</span>
</div>
</a>
</li>
</ul>
</div>
<!-- notification end -->
<!-- message start -->
<div class="header-message-box ml-15 d-none d-md-flex">
<button class="dropdown-toggle" type="button" id="message" data-bs-toggle="dropdown"
aria-expanded="false">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M7.74866 5.97421C7.91444 5.96367 8.08162 5.95833 8.25005 5.95833C12.5532 5.95833 16.0417 9.4468 16.0417 13.75C16.0417 13.9184 16.0364 14.0856 16.0259 14.2514C16.3246 14.138 16.6127 14.003 16.8883 13.8482L19.2306 14.629C19.7858 14.8141 20.3141 14.2858 20.129 13.7306L19.3482 11.3882C19.8694 10.4604 20.1667 9.38996 20.1667 8.25C20.1667 4.70617 17.2939 1.83333 13.75 1.83333C11.0077 1.83333 8.66702 3.55376 7.74866 5.97421Z"
fill="" />
<path
d="M14.6667 13.75C14.6667 17.2938 11.7939 20.1667 8.25004 20.1667C7.11011 20.1667 6.03962 19.8694 5.11182 19.3482L2.76946 20.129C2.21421 20.3141 1.68597 19.7858 1.87105 19.2306L2.65184 16.8882C2.13062 15.9604 1.83338 14.89 1.83338 13.75C1.83338 10.2062 4.70622 7.33333 8.25004 7.33333C11.7939 7.33333 14.6667 10.2062 14.6667 13.75ZM5.95838 13.75C5.95838 13.2437 5.54797 12.8333 5.04171 12.8333C4.53545 12.8333 4.12504 13.2437 4.12504 13.75C4.12504 14.2563 4.53545 14.6667 5.04171 14.6667C5.54797 14.6667 5.95838 14.2563 5.95838 13.75ZM9.16671 13.75C9.16671 13.2437 8.7563 12.8333 8.25004 12.8333C7.74379 12.8333 7.33338 13.2437 7.33338 13.75C7.33338 14.2563 7.74379 14.6667 8.25004 14.6667C8.7563 14.6667 9.16671 14.2563 9.16671 13.75ZM11.4584 14.6667C11.9647 14.6667 12.375 14.2563 12.375 13.75C12.375 13.2437 11.9647 12.8333 11.4584 12.8333C10.9521 12.8333 10.5417 13.2437 10.5417 13.75C10.5417 14.2563 10.9521 14.6667 11.4584 14.6667Z"
fill="" />
</svg>
<span></span>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="message">
<li>
<a href="#0">
<div class="image">
<img src="assets/images/lead/lead-5.png" alt="" />
</div>
<div class="content">
<h6>Jacob Jones</h6>
<p>Hey!I can across your profile and ...</p>
<span>10 mins ago</span>
</div>
</a>
</li>
<li>
<a href="#0">
<div class="image">
<img src="assets/images/lead/lead-3.png" alt="" />
</div>
<div class="content">
<h6>John Doe</h6>
<p>Would you mind please checking out</p>
<span>12 mins ago</span>
</div>
</a>
</li>
<li>
<a href="#0">
<div class="image">
<img src="assets/images/lead/lead-2.png" alt="" />
</div>
<div class="content">
<h6>Anee Lee</h6>
<p>Hey! are you available for freelance?</p>
<span>1h ago</span>
</div>
</a>
</li>
</ul>
</div>
<!-- message end -->
<!-- profile start -->
<div class="profile-box ml-15">
<button class="dropdown-toggle bg-transparent border-0" type="button" id="profile"
data-bs-toggle="dropdown" aria-expanded="false">
<div class="profile-info">
<div class="info">
<div class="image">
<img src="assets/images/profile/profile-image.png" alt="" />
</div>
<div>
<h6 class="fw-500">Adam Joe</h6>
<p>Admin</p>
</div>
</div>
</div>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="profile">
<li>
<div class="author-info flex items-center !p-1">
<div class="image">
<img src="assets/images/profile/profile-image.png" alt="image">
</div>
<div class="content">
<h4 class="text-sm">Adam Joe</h4>
<a class="text-black/40 dark:text-white/40 hover:text-black dark:hover:text-white text-xs"
href="#">[email protected]</a>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<a href="#0">
<i class="lni lni-user"></i> View Profile
</a>
</li>
<li>
<a href="#0">
<i class="lni lni-alarm"></i> Notifications
</a>
</li>
<li>
<a href="#0"> <i class="lni lni-inbox"></i> Messages </a>
</li>
<li>
<a href="#0"> <i class="lni lni-cog"></i> Settings </a>
</li>
<li class="divider"></li>
<li>
<a href="#0"> <i class="lni lni-exit"></i> Sign Out </a>
</li>
</ul>
</div>
<!-- profile end -->
</div>
</div>
</div>
</div>
</header>
<!-- ========== header end ========== -->
<!-- ========== button components start ========== -->
<section class="button-components">
<div class="container-fluid">
<!-- ========== title-wrapper start ========== -->
<div class="title-wrapper pt-30">
<div class="row align-items-center">
<div class="col-md-6">
<div class="title">
<h2>Buttons</h2>
</div>
</div>
<!-- end col -->
<div class="col-md-6">
<div class="breadcrumb-wrapper">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#0">Dashboard</a>
</li>
<li class="breadcrumb-item">
<a href="#0">UI Components</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
Buttons
</li>
</ol>
</nav>
</div>
</div>
<!-- end col -->
</div>
<!-- end row -->
</div>
<!-- ========== title-wrapper end ========== -->
<!-- ========== button-cards-wrapper start ========== -->
<div class="buttons-cards-wrapper">
<div class="row">
<div class="col-lg-6">
<div class="card-style mb-30">
<h5 class="text-medium mb-25">Square Buttons</h5>
<ul class="buttons-group">
<li>
<a href="#0" class="main-btn primary-btn square-btn btn-hover">Primary</a>
</li>
<li>
<a href="#0" class="main-btn secondary-btn square-btn btn-hover">Secondary</a>
</li>
<li>
<a href="#0" class="main-btn success-btn square-btn btn-hover">Success</a>
</li>
<li>
<a href="#0" class="main-btn danger-btn square-btn btn-hover">Danger</a>
</li>
<li>
<a href="#0" class="main-btn warning-btn square-btn btn-hover">Warning</a>
</li>
<li>
<a href="#0" class="main-btn info-btn square-btn btn-hover">Info</a>
</li>
<li>
<a href="#0" class="main-btn dark-btn square-btn btn-hover">Dark</a>
</li>
<li>
<a href="#0" class="main-btn light-btn square-btn btn-hover">Light</a>
</li>
<li>
<a href="#0" class="main-btn active-btn square-btn btn-hover">Active</a>
</li>
<li>
<a href="#0" class="main-btn deactive-btn square-btn btn-hover">Deactive</a>
</li>
</ul>
</div>
<!-- end card -->
</div>
<!-- end col -->
<div class="col-lg-6">
<div class="card-style mb-30">
<h5 class="text-medium mb-25">
Default Buttons
<span class="text-sm text-regular">(3px Corner Round)</span>
</h5>
<ul class="buttons-group">
<li>
<a href="#0" class="main-btn primary-btn btn-hover">Primary</a>
</li>
<li>
<a href="#0" class="main-btn secondary-btn btn-hover">Secondary</a>
</li>
<li>
<a href="#0" class="main-btn success-btn btn-hover">Success</a>
</li>
<li>
<a href="#0" class="main-btn danger-btn btn-hover">Danger</a>
</li>
<li>
<a href="#0" class="main-btn warning-btn btn-hover">Warning</a>
</li>
<li>
<a href="#0" class="main-btn info-btn btn-hover">Info</a>
</li>
<li>
<a href="#0" class="main-btn dark-btn btn-hover">Dark</a>
</li>
<li>
<a href="#0" class="main-btn light-btn btn-hover">Light</a>
</li>
<li>
<a href="#0" class="main-btn active-btn btn-hover">Active</a>
</li>
<li>
<a href="#0" class="main-btn deactive-btn btn-hover">Deactive</a>
</li>
</ul>
</div>
<!-- end card -->
</div>
<!-- end col -->
<div class="col-lg-6">
<div class="card-style mb-30">
<h5 class="text-medium mb-25">
Rounded Buttons
<span class="text-sm text-regular">(Full Rounded)</span>
</h5>
<ul class="buttons-group">
<li>
<a href="#0" class="main-btn primary-btn rounded-full btn-hover">Primary</a>
</li>
<li>
<a href="#0" class="main-btn secondary-btn rounded-full btn-hover">Secondary</a>
</li>
<li>
<a href="#0" class="main-btn success-btn rounded-full btn-hover">Success</a>
</li>
<li>
<a href="#0" class="main-btn danger-btn rounded-full btn-hover">Danger</a>
</li>
<li>
<a href="#0" class="main-btn warning-btn rounded-full btn-hover">Warning</a>
</li>
<li>
<a href="#0" class="main-btn info-btn rounded-full btn-hover">Info</a>
</li>
<li>
<a href="#0" class="main-btn dark-btn rounded-full btn-hover">Dark</a>
</li>
<li>
<a href="#0" class="main-btn light-btn rounded-full btn-hover">Light</a>
</li>
<li>
<a href="#0" class="main-btn active-btn rounded-full btn-hover">Active</a>
</li>
<li>
<a href="#0" class="main-btn deactive-btn rounded-full btn-hover">Deactive</a>
</li>
</ul>
</div>
<!-- end card -->
</div>
<!-- end col -->
<div class="col-lg-6">
<div class="card-style mb-30">
<h5 class="text-medium mb-25">Square Outline Buttons</h5>
<ul class="buttons-group">
<li>
<a href="#0" class="main-btn primary-btn-outline square-btn btn-hover">Primary</a>
</li>
<li>
<a href="#0" class="main-btn secondary-btn-outline square-btn btn-hover">Secondary</a>
</li>
<li>
<a href="#0" class="main-btn success-btn-outline square-btn btn-hover">Success</a>
</li>
<li>
<a href="#0" class="main-btn danger-btn-outline square-btn btn-hover">Danger</a>
</li>
<li>
<a href="#0" class="main-btn warning-btn-outline square-btn btn-hover">Warning</a>
</li>
<li>
<a href="#0" class="main-btn info-btn-outline square-btn btn-hover">Info</a>
</li>
<li>
<a href="#0" class="main-btn dark-btn-outline square-btn btn-hover">Dark</a>
</li>
<li>
<a href="#0" class="main-btn light-btn-outline square-btn btn-hover">Light</a>
</li>
<li>
<a href="#0" class="main-btn active-btn-outline square-btn btn-hover">Active</a>
</li>
<li>
<a href="#0" class="main-btn deactive-btn-outline square-btn btn-hover">Deactive</a>
</li>
</ul>
</div>
<!-- end card -->
</div>
<!-- end col -->
<div class="col-lg-6">
<div class="card-style mb-30">
<h5 class="text-medium mb-25">
Default Outline Buttons
<span class="text-sm text-regular">(3 Px Round)</span>
</h5>
<ul class="buttons-group">
<li>
<a href="#0" class="main-btn primary-btn-outline btn-hover">Primary</a>
</li>
<li>
<a href="#0" class="main-btn secondary-btn-outline btn-hover">Secondary</a>
</li>
<li>
<a href="#0" class="main-btn success-btn-outline btn-hover">Success</a>
</li>
<li>
<a href="#0" class="main-btn danger-btn-outline btn-hover">Danger</a>
</li>
<li>
<a href="#0" class="main-btn warning-btn-outline btn-hover">Warning</a>
</li>
<li>
<a href="#0" class="main-btn info-btn-outline btn-hover">Info</a>
</li>
<li>
<a href="#0" class="main-btn dark-btn-outline btn-hover">Dark</a>
</li>
<li>
<a href="#0" class="main-btn light-btn-outline btn-hover">Light</a>
</li>
<li>
<a href="#0" class="main-btn active-btn-outline btn-hover">Active</a>
</li>
<li>
<a href="#0" class="main-btn deactive-btn-outline btn-hover">Deactive</a>
</li>
</ul>
</div>
<!-- end card -->
</div>
<!-- end col -->
<div class="col-lg-6">
<div class="card-style mb-30">
<h5 class="text-medium mb-25">
Default Outline Buttons
<span class="text-sm text-regular">(Full Rounded)</span>
</h5>
<ul class="buttons-group">
<li>
<a href="#0" class="main-btn primary-btn-outline rounded-full btn-hover">Primary</a>
</li>
<li>
<a href="#0" class="main-btn secondary-btn-outline rounded-full btn-hover">Secondary</a>
</li>
<li>
<a href="#0" class="main-btn success-btn-outline rounded-full btn-hover">Success</a>
</li>
<li>
<a href="#0" class="main-btn danger-btn-outline rounded-full btn-hover">Danger</a>
</li>
<li>
<a href="#0" class="main-btn warning-btn-outline rounded-full btn-hover">Warning</a>
</li>
<li>
<a href="#0" class="main-btn info-btn-outline rounded-full btn-hover">Info</a>
</li>
<li>
<a href="#0" class="main-btn dark-btn-outline rounded-full btn-hover">Dark</a>
</li>
<li>
<a href="#0" class="main-btn light-btn-outline rounded-full btn-hover">Light</a>
</li>
<li>
<a href="#0" class="main-btn active-btn-outline rounded-full btn-hover">Active</a>
</li>
<li>
<a href="#0" class="main-btn deactive-btn-outline rounded-full btn-hover">Deactive</a>
</li>
</ul>
</div>
<!-- end card -->
</div>
<!-- end col -->
<div class="col-lg-6">
<div class="card-style mb-30">
<h5 class="text-medium mb-25">Square Light Buttons</h5>
<ul class="buttons-group">
<li>
<a href="#0" class="main-btn primary-btn-light square-btn btn-hover">Primary</a>
</li>
<li>
<a href="#0" class="main-btn secondary-btn-light square-btn btn-hover">Secondary</a>
</li>
<li>
<a href="#0" class="main-btn success-btn-light square-btn btn-hover">Success</a>
</li>
<li>
<a href="#0" class="main-btn danger-btn-light square-btn btn-hover">Danger</a>
</li>
<li>
<a href="#0" class="main-btn warning-btn-light square-btn btn-hover">Warning</a>
</li>
<li>
<a href="#0" class="main-btn info-btn-light square-btn btn-hover">Info</a>
</li>
<li>
<a href="#0" class="main-btn dark-btn-light square-btn btn-hover">Dark</a>
</li>
<li>
<a href="#0" class="main-btn light-btn-light square-btn btn-hover">Light</a>
</li>
<li>
<a href="#0" class="main-btn active-btn-light square-btn btn-hover">Active</a>
</li>
<li>
<a href="#0" class="main-btn deactive-btn-light square-btn btn-hover">Deactive</a>
</li>
</ul>
</div>
<!-- end card -->
</div>
<!-- end col -->
<div class="col-lg-6">
<div class="card-style mb-30">
<h5 class="text-medium mb-25">
Default Light Buttons
<span class="text-sm text-regular">(3px Corner Round)</span>
</h5>
<ul class="buttons-group">
<li>
<a href="#0" class="main-btn primary-btn-light btn-hover">Primary</a>
</li>
<li>
<a href="#0" class="main-btn secondary-btn-light btn-hover">Secondary</a>
</li>
<li>
<a href="#0" class="main-btn success-btn-light btn-hover">Success</a>
</li>
<li>
<a href="#0" class="main-btn danger-btn-light btn-hover">Danger</a>
</li>
<li>
<a href="#0" class="main-btn warning-btn-light btn-hover">Warning</a>
</li>
<li>
<a href="#0" class="main-btn info-btn-light btn-hover">Info</a>
</li>
<li>
<a href="#0" class="main-btn dark-btn-light btn-hover">Dark</a>
</li>
<li>
<a href="#0" class="main-btn light-btn-light btn-hover">Light</a>
</li>
<li>
<a href="#0" class="main-btn active-btn-light btn-hover">Active</a>
</li>
<li>
<a href="#0" class="main-btn deactive-btn-light btn-hover">Deactive</a>
</li>
</ul>
</div>
<!-- end card -->
</div>
<div class="col-lg-6">
<div class="card-style mb-30">
<h5 class="text-medium mb-25">
Rounded Light Buttons
<span class="text-sm text-regular">(Full Rounded)</span>
</h5>
<ul class="buttons-group">
<li>
<a href="#0" class="main-btn primary-btn-light rounded-full btn-hover">Primary</a>
</li>
<li>
<a href="#0" class="main-btn secondary-btn-light rounded-full btn-hover">Secondary</a>
</li>
<li>
<a href="#0" class="main-btn success-btn-light rounded-full btn-hover">Success</a>
</li>
<li>
<a href="#0" class="main-btn danger-btn-light rounded-full btn-hover">Danger</a>
</li>
<li>
<a href="#0" class="main-btn warning-btn-light rounded-full btn-hover">Warning</a>
</li>
<li>
<a href="#0" class="main-btn info-btn-light rounded-full btn-hover">Info</a>
</li>
<li>
<a href="#0" class="main-btn dark-btn-light rounded-full btn-hover">Dark</a>
</li>
<li>
<a href="#0" class="main-btn light-btn-light rounded-full btn-hover">Light</a>
</li>
<li>
<a href="#0" class="main-btn active-btn-light rounded-full btn-hover">Active</a>
</li>
<li>
<a href="#0" class="main-btn deactive-btn-light rounded-full btn-hover">Deactive</a>
</li>
</ul>
</div>
<!-- end card -->
</div>
<!-- end col -->
<div class="col-lg-6">
<div class="card-style mb-30">
<h5 class="text-medium mb-25">Square Buttons With Icon</h5>
<ul class="buttons-group">
<li>
<a href="#0" class="main-btn primary-btn square-btn btn-hover">
<i class="lni lni-heart"></i>
Primary
</a>
</li>
<li>
<a href="#0" class="main-btn secondary-btn square-btn btn-hover">
<i class="lni lni-heart"></i>
Secondary
</a>
</li>
<li>
<a href="#0" class="main-btn success-btn square-btn btn-hover">
<i class="lni lni-heart"></i>
Success
</a>
</li>
<li>
<a href="#0" class="main-btn danger-btn square-btn btn-hover">
<i class="lni lni-heart"></i>
Danger
</a>
</li>
<li>
<a href="#0" class="main-btn warning-btn square-btn btn-hover">
<i class="lni lni-heart"></i>
Warning
</a>
</li>
<li>
<a href="#0" class="main-btn info-btn square-btn btn-hover">
<i class="lni lni-heart"></i>
Info
</a>
</li>
<li>
<a href="#0" class="main-btn dark-btn square-btn btn-hover">
<i class="lni lni-heart"></i>
Dark
</a>
</li>
<li>
<a href="#0" class="main-btn light-btn square-btn btn-hover">
<i class="lni lni-heart"></i>
Light
</a>
</li>
<li>
<a href="#0" class="main-btn active-btn square-btn btn-hover">
<i class="lni lni-heart"></i>
Active
</a>
</li>
<li>
<a href="#0" class="main-btn deactive-btn square-btn btn-hover">
<i class="lni lni-heart"></i>
Deactive
</a>
</li>
</ul>
</div>
<!-- end card -->
</div>
<!-- end col -->
<div class="col-lg-6">
<div class="card-style mb-30">
<h5 class="text-medium mb-25">
Default Buttons With Icon
<span class="text-sm text-regular">(3px Corner Round)</span>
</h5>
<ul class="buttons-group">
<li>
<a href="#0" class="main-btn primary-btn btn-hover">
<i class="lni lni-heart"></i>
Primary
</a>
</li>
<li>
<a href="#0" class="main-btn secondary-btn btn-hover">
<i class="lni lni-heart"></i>
Secondary
</a>
</li>
<li>
<a href="#0" class="main-btn success-btn btn-hover">
<i class="lni lni-heart"></i>
Success
</a>
</li>
<li>
<a href="#0" class="main-btn danger-btn btn-hover">
<i class="lni lni-heart"></i>
Danger
</a>
</li>
<li>
<a href="#0" class="main-btn warning-btn btn-hover">
<i class="lni lni-heart"></i>
Warning
</a>
</li>
<li>
<a href="#0" class="main-btn info-btn btn-hover">
<i class="lni lni-heart"></i>
Info
</a>
</li>
<li>
<a href="#0" class="main-btn dark-btn btn-hover">
<i class="lni lni-heart"></i>
Dark