button-group.scss 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. .btn-group button {
  2. padding: 5px 15px; /* Some padding */
  3. cursor: pointer; /* Pointer/hand icon */
  4. text-transform: capitalize;
  5. }
  6. /* Clear floats (clearfix hack) */
  7. .btn-group:after {
  8. content: "";
  9. clear: both;
  10. display: table;
  11. }
  12. .button-71 {
  13. background-color: #0092ca;
  14. border: 0;
  15. border-radius: 56px;
  16. color: #fff;
  17. cursor: pointer;
  18. display: inline-block;
  19. font-family: system-ui,-apple-system,system-ui,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;
  20. font-size: 16px;
  21. font-weight: 600;
  22. outline: 0;
  23. padding: 16px 16px;
  24. position: relative;
  25. text-align: center;
  26. text-decoration: none;
  27. transition: all .3s;
  28. user-select: none;
  29. -webkit-user-select: none;
  30. touch-action: manipulation;
  31. margin: 1px;
  32. }
  33. .button-71:before {
  34. background-color: initial;
  35. background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
  36. border-radius: 125px;
  37. content: "";
  38. height: 50%;
  39. left: 4%;
  40. opacity: .5;
  41. position: absolute;
  42. top: 0;
  43. transition: all .3s;
  44. width: 92%;
  45. }
  46. .button-71:hover {
  47. box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
  48. transform: scale(1.05);
  49. }
  50. .button-71:focus {
  51. border: 3px solid black;
  52. box-shadow: rgba(131, 192, 253, 0.5) 0 0 0 3px;
  53. transform: scale(1.05);
  54. outline: none;
  55. }
  56. @media (min-width: 768px) {
  57. .button-71 {
  58. padding: 16px 48px;
  59. }
  60. }