Button by barisdogansutcu
#e8e8e8
1.text { 2 font-size: 5px; 3 position: absolute; 4 top: 3px; 5 color: #2f363d; 6 opacity: 0; 7} 8.icons { 9 display: grid; 10 grid-template-columns: repeat(4, 1fr); 11 place-content: center; 12 gap: 5px; 13} 14.title { 15 grid-column-start: 1; 16 grid-column-end: 5; 17 text-align: center; 18 font-weight: 100; 19 display: flex; 20 align-items: center; 21 justify-content: space-between; 22} 23.title span { 24 text-shadow: 1px 1px #ffffff; 25} 26.icon-box:hover { 27 transform: scale(2); 28 z-index: 9; 29} 30.icon-box { 31 background-color: #ffffff; 32 width: 40px; 33 height: 40px; 34 display: flex; 35 align-items: center; 36 justify-content: center; 37 box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; 38 border-radius: 5px; 39 transition: all 0.2s ease; 40 position: relative; 41} 42.icon-box:hover .text { 43 opacity: 1; 44} 45.icon-box:hover button { 46 margin-top: 5px; 47} 48button { 49 background-color: transparent; 50 z-index: 0; 51 margin-top: 0px; 52} 53.activity { 54 position: relative; 55 width: 30px; 56 height: 30px; 57 display: flex; 58 align-items: center; 59 justify-content: center; 60 border: none; 61 cursor: pointer; 62} 63.activity .line-1 { 64 display: inline-flex; 65 width: 8px; 66 height: 2px; 67 border-radius: 50px; 68 background-color: #2f363d; 69} 70.activity .line-2 { 71 display: inline-flex; 72 width: 9px; 73 height: 2px; 74 border-radius: 50px; 75 background-color: #2f363d; 76 transform: rotate(-75deg); 77 margin-top: -8px; 78 margin-left: -4px; 79} 80.activity .line-3 { 81 display: inline-flex; 82 width: 16px; 83 height: 2px; 84 border-radius: 50px; 85 background-color: #2f363d; 86 transform: rotate(70deg); 87 margin-top: -3px; 88 margin-left: -9px; 89} 90.activity .line-4 { 91 display: inline-flex; 92 width: 8px; 93 height: 2px; 94 border-radius: 50px; 95 background-color: #2f363d; 96 transform: rotate(-70deg); 97 margin-top: 6px; 98 margin-left: -8px; 99} 100.activity .line-5 { 101 display: inline-flex; 102 width: 8px; 103 height: 2px; 104 border-radius: 50px; 105 background-color: #2f363d; 106 margin-top: 0px; 107 margin-left: -3px; 108} 109/* ----- */ 110.airplay { 111 position: relative; 112 width: 30px; 113 height: 30px; 114 display: flex; 115 align-items: center; 116 justify-content: center; 117 border: none; 118 cursor: pointer; 119} 120.airplay .line-1 { 121 width: 20px; 122 height: 14px; 123 background-color: white; 124 border-radius: 2px; 125 box-shadow: 0px 0px 0px 2px #2f363d; 126} 127.airplay .line-2 { 128 width: 0; 129 height: 0; 130 border: 6px solid transparent; 131 border-top: 0; 132 border-bottom: 6px solid #2f363d; 133 position: absolute; 134 margin-top: 16px; 135 background-color: #ffffff; 136 border-radius: 100% 100% 0 0; 137} 138/* ----- */ 139.alert-circle { 140 width: 20px; 141 height: 20px; 142 background-color: #ffffff; 143 border-radius: 100%; 144 border: solid 2px #2f363d; 145 display: flex; 146 align-items: center; 147 justify-content: center; 148 flex-direction: column; 149 gap: 1px; 150 cursor: pointer; 151} 152.alert-circle .line-1 { 153 width: 2px; 154 height: 6px; 155 background-color: #2f363d; 156 border-radius: 50px; 157} 158.alert-circle .line-2 { 159 width: 2px; 160 height: 2px; 161 background-color: #2f363d; 162 border-radius: 50px; 163} 164/* ----- */ 165.alert-triangle { 166 width: 20px; 167 height: 20px; 168 background-color: #ffffff; 169 border-radius: 100%; 170 border: solid 2px #2f363d; 171 display: flex; 172 align-items: center; 173 justify-content: center; 174 flex-direction: column; 175 gap: 1px; 176 cursor: pointer; 177} 178.alert-triangle .line-1 { 179 width: 2px; 180 height: 6px; 181 background-color: #2f363d; 182 border-radius: 50px; 183} 184.alert-triangle .line-2 { 185 width: 2px; 186 height: 2px; 187 background-color: #2f363d; 188 border-radius: 50px; 189} 190/* ----- */ 191.alert-octagon { 192 display: flex; 193 align-items: center; 194 justify-content: center; 195 border: none; 196 position: relative; 197 cursor: pointer; 198} 199.alert-octagon .line-1 { 200 width: 20px; 201 height: 8px; 202 background-color: #fff; 203 border-left: solid 2px #2f363d; 204 border-right: solid 2px #2f363d; 205} 206.alert-octagon .line-2 { 207 width: 8px; 208 height: 20px; 209 position: absolute; 210 transform: rotate(0deg); 211 background-color: #fff; 212 border-top: solid 2px #2f363d; 213 border-bottom: solid 2px #2f363d; 214} 215.alert-octagon .line-3 { 216 width: 8px; 217 height: 20px; 218 position: absolute; 219 transform: rotate(45deg); 220 background-color: #fff; 221 border-top: solid 2px #2f363d; 222 border-bottom: solid 2px #2f363d; 223} 224.alert-octagon .line-4 { 225 width: 8px; 226 height: 20px; 227 position: absolute; 228 transform: rotate(-45deg); 229 background-color: #fff; 230 border-top: solid 2px #2f363d; 231 border-bottom: solid 2px #2f363d; 232} 233.alert-octagon .center { 234 position: absolute; 235 left: 50%; 236 top: 50%; 237 width: 100%; 238 height: 100%; 239 transform: translate(-50%, -50%); 240 display: flex; 241 flex-direction: column; 242 align-items: center; 243 justify-content: center; 244 gap: 1px; 245} 246.alert-octagon .center .line-5 { 247 display: flex; 248 width: 2px; 249 height: 6px; 250 background-color: #2f363d; 251 border-radius: 50px; 252} 253.alert-octagon .center .line-6 { 254 display: flex; 255 width: 2px; 256 height: 2px; 257 background-color: #2f363d; 258 border-radius: 50px; 259} 260/* ----- */ 261.center-text { 262 display: flex; 263 align-items: center; 264 justify-content: center; 265 flex-direction: column; 266 gap: 2px; 267 width: 18px; 268 height: 24px; 269 border: none; 270 cursor: pointer; 271} 272.center-text .line-1 { 273 width: 18px; 274 height: 2px; 275 background-color: #2f363d; 276 border-radius: 5px; 277} 278.center-text .line-2 { 279 width: 12px; 280 height: 2px; 281 background-color: #2f363d; 282 border-radius: 5px; 283} 284.center-text .line-3 { 285 width: 18px; 286 height: 2px; 287 background-color: #2f363d; 288 border-radius: 5px; 289} 290.center-text .line-4 { 291 width: 12px; 292 height: 2px; 293 background-color: #2f363d; 294 border-radius: 5px; 295} 296/* ------ */ 297.justify-text { 298 display: flex; 299 align-items: center; 300 justify-content: center; 301 flex-direction: column; 302 gap: 2px; 303 width: 18px; 304 height: 24px; 305 border: none; 306 cursor: pointer; 307} 308.justify-text .line-1 { 309 width: 18px; 310 height: 2px; 311 background-color: #2f363d; 312 border-radius: 5px; 313} 314.justify-text .line-2 { 315 width: 18px; 316 height: 2px; 317 background-color: #2f363d; 318 border-radius: 5px; 319} 320.justify-text .line-3 { 321 width: 18px; 322 height: 2px; 323 background-color: #2f363d; 324 border-radius: 5px; 325} 326.justify-text .line-4 { 327 width: 18px; 328 height: 2px; 329 background-color: #2f363d; 330 border-radius: 5px; 331} 332/* ----- */ 333.left-text { 334 display: flex; 335 align-items: flex-start; 336 justify-content: center; 337 flex-direction: column; 338 gap: 2px; 339 width: 18px; 340 height: 24px; 341 border: none; 342 cursor: pointer; 343} 344.left-text .line-1 { 345 width: 18px; 346 height: 2px; 347 background-color: #2f363d; 348 border-radius: 5px; 349} 350.left-text .line-2 { 351 width: 12px; 352 height: 2px; 353 background-color: #2f363d; 354 border-radius: 5px; 355} 356.left-text .line-3 { 357 width: 18px; 358 height: 2px; 359 background-color: #2f363d; 360 border-radius: 5px; 361} 362.left-text .line-4 { 363 width: 12px; 364 height: 2px; 365 background-color: #2f363d; 366 border-radius: 5px; 367} 368/* ----- */ 369.right-text { 370 display: flex; 371 align-items: flex-end; 372 justify-content: center; 373 flex-direction: column; 374 gap: 2px; 375 width: 18px; 376 height: 24px; 377 border: none; 378 cursor: pointer; 379} 380.right-text .line-1 { 381 width: 18px; 382 height: 2px; 383 background-color: #2f363d; 384 border-radius: 5px; 385} 386.right-text .line-2 { 387 width: 12px; 388 height: 2px; 389 background-color: #2f363d; 390 border-radius: 5px; 391} 392.right-text .line-3 { 393 width: 18px; 394 height: 2px; 395 background-color: #2f363d; 396 border-radius: 5px; 397} 398.right-text .line-4 { 399 width: 12px; 400 height: 2px; 401 background-color: #2f363d; 402 border-radius: 5px; 403} 404/* ----- */ 405.left-arrow { 406 display: flex; 407 align-items: center; 408 justify-content: center; 409 flex-direction: column; 410 width: 10px; 411 height: 10px; 412 border: none; 413 position: relative; 414 transform: rotate(-135deg); 415 cursor: pointer; 416 margin-left: -2px; 417} 418.left-arrow .line-1 { 419 width: 100%; 420 height: 100%; 421 background-color: #fff; 422} 423.left-arrow .line-1:before { 424 content: ""; 425 width: 100%; 426 height: 2px; 427 background-color: #2f363d; 428 border-radius: 50px; 429 position: absolute; 430 left: 0; 431 top: 0; 432} 433.left-arrow .line-1:after { 434 content: ""; 435 width: 2px; 436 height: 100%; 437 background-color: #2f363d; 438 border-radius: 50px; 439 position: absolute; 440 right: 0; 441 top: 0; 442} 443.left-arrow .line-2 { 444 width: 14px; 445 height: 2px; 446 background-color: #2f363d; 447 border-radius: 5px; 448 position: absolute; 449 transform: translate(-27%, -110%) rotate(-45deg); 450 left: 0; 451 bottom: 0; 452} 453/* ----- */ 454.right-arrow { 455 display: flex; 456 align-items: center; 457 justify-content: center; 458 flex-direction: column; 459 width: 10px; 460 height: 10px; 461 border: none; 462 position: relative; 463 transform: rotate(45deg); 464 cursor: pointer; 465 margin-left: 2px; 466} 467.right-arrow .line-1 { 468 width: 100%; 469 height: 100%; 470 background-color: #fff; 471} 472.right-arrow .line-1:before { 473 content: ""; 474 width: 100%; 475 height: 2px; 476 background-color: #2f363d; 477 border-radius: 50px; 478 position: absolute; 479 left: 0; 480 top: 0; 481} 482.right-arrow .line-1:after { 483 content: ""; 484 width: 2px; 485 height: 100%; 486 background-color: #2f363d; 487 border-radius: 50px; 488 position: absolute; 489 right: 0; 490 top: 0; 491} 492.right-arrow .line-2 { 493 width: 14px; 494 height: 2px; 495 background-color: #2f363d; 496 border-radius: 5px; 497 position: absolute; 498 transform: translate(-27%, -110%) rotate(-45deg); 499 left: 0; 500 bottom: 0; 501} 502/* ----- */ 503.bottom-arrow { 504 display: flex; 505 align-items: center; 506 justify-content: center; 507 flex-direction: column; 508 width: 10px; 509 height: 10px; 510 border: none; 511 position: relative; 512 transform: rotate(135deg); 513 cursor: pointer; 514 margin-top: 2px; 515} 516.bottom-arrow .line-1 { 517 width: 100%; 518 height: 100%; 519 background-color: #fff; 520} 521.bottom-arrow .line-1:before { 522 content: ""; 523 width: 100%; 524 height: 2px; 525 background-color: #2f363d; 526 border-radius: 50px; 527 position: absolute; 528 left: 0; 529 top: 0; 530} 531.bottom-arrow .line-1:after { 532 content: ""; 533 width: 2px; 534 height: 100%; 535 background-color: #2f363d; 536 border-radius: 50px; 537 position: absolute; 538 right: 0; 539 top: 0; 540} 541.bottom-arrow .line-2 { 542 width: 14px; 543 height: 2px; 544 background-color: #2f363d; 545 border-radius: 5px; 546 position: absolute; 547 transform: translate(-27%, -110%) rotate(-45deg); 548 left: 0; 549 bottom: 0; 550} 551/* ----- */ 552.top-arrow { 553 display: flex; 554 align-items: center; 555 justify-content: center; 556 flex-direction: column; 557 width: 10px; 558 height: 10px; 559 border: none; 560 position: relative; 561 transform: rotate(-45deg); 562 cursor: pointer; 563 margin-top: -2px; 564} 565.top-arrow .line-1 { 566 width: 100%; 567 height: 100%; 568 background-color: #fff; 569} 570.top-arrow .line-1:before { 571 content: ""; 572 width: 100%; 573 height: 2px; 574 background-color: #2f363d; 575 border-radius: 50px; 576 position: absolute; 577 left: 0; 578 top: 0; 579} 580.top-arrow .line-1:after { 581 content: ""; 582 width: 2px; 583 height: 100%; 584 background-color: #2f363d; 585 border-radius: 50px; 586 position: absolute; 587 right: 0; 588 top: 0; 589} 590.top-arrow .line-2 { 591 width: 14px; 592 height: 2px; 593 background-color: #2f363d; 594 border-radius: 5px; 595 position: absolute; 596 transform: translate(-27%, -110%) rotate(-45deg); 597 left: 0; 598 bottom: 0; 599} 600/* ----- */ 601.battery-empty { 602 position: relative; 603 display: flex; 604 border: none; 605 cursor: pointer; 606} 607.battery-empty .line-1 { 608 box-sizing: border-box; 609 width: 20px; 610 height: 12px; 611 border: 2px solid #2f363d; 612 border-radius: 3px; 613} 614.battery-empty .line-2 { 615 position: absolute; 616 box-sizing: border-box; 617 border-radius: 3px; 618 width: 4px; 619 height: 6px; 620 right: -2px; 621 top: 3px; 622 background-color: #2f363d; 623} 624/* ----- */ 625.battery-charge { 626 position: relative; 627 display: flex; 628 border: none; 629 cursor: pointer; 630} 631.battery-charge .line-1 { 632 box-sizing: border-box; 633 width: 20px; 634 height: 12px; 635 border: 2px solid #2f363d; 636 border-radius: 3px; 637} 638.battery-charge .line-2 { 639 position: absolute; 640 box-sizing: border-box; 641 border-radius: 3px; 642 width: 4px; 643 height: 6px; 644 right: -2px; 645 top: 3px; 646 background-color: #2f363d; 647} 648.battery-charge .line-3 { 649 position: absolute; 650 display: flex; 651 box-sizing: border-box; 652 width: 0; 653 height: 0; 654 border-left: 1px solid transparent; 655 border-right: 1px solid transparent; 656 border-bottom: 4px solid #2f363d; 657 left: 9px; 658 top: 2px; 659 transform: rotate(30deg); 660} 661.battery-charge .line-4 { 662 position: absolute; 663 display: flex; 664 box-sizing: border-box; 665 width: 0; 666 height: 0; 667 border-left: 1px solid transparent; 668 border-right: 1px solid transparent; 669 border-top: 5px solid #2f363d; 670 right: 10px; 671 bottom: 2px; 672 transform: rotate(30deg); 673} 674/* ----- */ 675.battery { 676 position: relative; 677 display: flex; 678 border: none; 679 cursor: pointer; 680} 681.battery .line-1 { 682 box-sizing: border-box; 683 width: 20px; 684 height: 12px; 685 border: 2px solid #2f363d; 686 border-radius: 3px; 687} 688.battery .line-2 { 689 position: absolute; 690 box-sizing: border-box; 691 border-radius: 3px; 692 width: 4px; 693 height: 6px; 694 right: -2px; 695 top: 3px; 696 background-color: #2f363d; 697} 698.battery .line-3 { 699 background-color: #2f363d; 700 position: absolute; 701 display: flex; 702 box-sizing: border-box; 703 height: 6px; 704 width: 40%; 705 border-radius: 1px; 706 top: 3px; 707 left: 3px; 708} 709/* ----- */ 710.battery-full { 711 position: relative; 712 display: flex; 713 border: none; 714 cursor: pointer; 715} 716.battery-full .line-1 { 717 box-sizing: border-box; 718 width: 20px; 719 height: 12px; 720 border: 2px solid #2f363d; 721 border-radius: 3px; 722} 723.battery-full .line-2 { 724 position: absolute; 725 box-sizing: border-box; 726 border-radius: 3px; 727 width: 4px; 728 height: 6px; 729 right: -2px; 730 top: 3px; 731 background-color: #2f363d; 732} 733.battery-full .line-3 { 734 background-color: #2f363d; 735 position: absolute; 736 display: flex; 737 box-sizing: border-box; 738 height: 6px; 739 width: calc(100% - 6px); 740 border-radius: 1px; 741 top: 3px; 742 left: 3px; 743} 744
77 views
77 views
MIT License