Advertisement
Guest User

Untitled

a guest
Apr 25th, 2019
84
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.52 KB | None | 0 0
  1. .btn-3d-1 {
  2. position: relative;
  3. background: orangered;
  4. border: none;
  5. color: white;
  6. padding: 15px 24px;
  7. font-size: 1.4rem;
  8. box-shadow: -6px 6px 0 hsl(16, 100%, 30%);
  9. outline: none;
  10. }
  11.  
  12. .btn-3d-1:hover {
  13. background: hsl(16, 100%, 45%);
  14. }
  15.  
  16. .btn-3d-1:active {
  17. background: hsl(16, 100%, 40%);
  18. top: 3px;
  19. left: -3px;
  20. box-shadow: -3px 3px 0 hsl(16, 100%, 30%);
  21. }
  22.  
  23. .btn-3d-1::before {
  24. position: absolute;
  25. display: block;
  26. content: "";
  27. height: 0;
  28. width: 0;
  29. /* border width needs to be size of the element's box shadow */
  30. border: solid 6px transparent;
  31.  
  32. /* border width needs to be size of the element's box shadow */
  33. border-right: solid 6px hsl(16, 100%, 30%);
  34.  
  35. /* no width for left, makes measurements easier */
  36. border-left-width: 0px;
  37.  
  38. background: none;
  39. top: 0px;
  40.  
  41. /* needs to be the same size as border width */
  42. left: -6px;
  43. }
  44.  
  45. .btn-3d-1::after {
  46. position: absolute;
  47. display: block;
  48. content: "";
  49. height: 0;
  50. width: 0;
  51. border: solid 6px transparent;
  52. border-top: solid 6px hsl(16, 100%, 30%);
  53. border-bottom-width: 0px;
  54. background: none;
  55. right: 0;
  56. bottom: -6px;
  57. }
  58.  
  59. .btn-3d-1:active::before {
  60. border: solid 3px transparent;
  61. border-right: solid 3px hsl(16, 100%, 30%);
  62. border-left-width: 0px;
  63. left: -3px;
  64. }
  65.  
  66. .btn-3d-1:active::after {
  67. border: solid 3px transparent;
  68. border-top: solid 3px hsl(16, 100%, 30%);
  69. border-bottom-width: 0px;
  70. bottom: -3px;
  71. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement