Advertisement
Guest User

Untitled

a guest
Apr 10th, 2018
129
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.50 KB | None | 0 0
  1. /*
  2. font-family: 'Josefin Sans', sans-serif;
  3. font-family: 'Lato', sans-serif;
  4. */
  5. @import url(https://fonts.googleapis.com/css?family=Lato:900);
  6. *, *:before, *:after{
  7.   box-sizing:border-box;
  8. }
  9. body
  10. {
  11.     background-color: #121212;
  12.     color: white;
  13.     font-family: 'Lato', sans-serif;
  14.     margin: 0;
  15. }
  16. p.napis
  17. {
  18.     letter-spacing:3px;
  19.     text-align:center;
  20.     font-family: 'Josefin Sans', sans-serif;
  21.     font-size: 40px;
  22. }
  23.  
  24. .logo
  25. {
  26.     text-align: center;
  27.     font-size: 64px;
  28.     letter-spacing: 3px;
  29.     text-transform: uppercase;
  30. }
  31. .btn
  32. {
  33.     position: absolute;
  34.     top: 60%;
  35.     left: 58%;
  36.     margin: -200px 0 0 -200px;
  37. }
  38. .box
  39. {
  40.     position: absolute;
  41.     top: 50%;
  42.     left: 54%;
  43.     margin: -200px 0 0 -200px;
  44. }
  45. a
  46. {
  47.     color: white;
  48.     text-decoration: none;
  49. }
  50. .btn
  51. {
  52.     background: #3498db;
  53.     background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  54.     background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  55.     background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  56.     background-image: -o-linear-gradient(top, #3498db, #2980b9);
  57.     background-image: linear-gradient(to bottom, #3498db, #2980b9);
  58.     -webkit-border-radius: 28;
  59.     -moz-border-radius: 28;
  60.     border-radius: 28px;
  61.     font-family: Arial;
  62.     color: #ffffff;
  63.     font-size: 20px;
  64.     padding: 10px 20px 10px 20px;
  65.     text-decoration: none;
  66.     -webkit-transition-duration: 0.3s;
  67.     transition-duration: 0.3s;
  68.     -webkit-transition-property: transform;
  69.     transition-property: transform;
  70.     overflow: hidden;
  71. }
  72. .btn:hover
  73. {
  74.     background: #3cb0fd;
  75.     background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  76.     background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  77.     background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  78.     background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  79.     background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  80.     text-decoration: none;
  81.     color: #fff;
  82.     -webkit-transform: scale(1.1);
  83.     transform: scale(1.1);
  84. }
  85. .btn:focus, .btn:active
  86. {
  87.     -webkit-transform: scale(1.1);
  88.     transform: scale(1.1);
  89. }
  90. .btn:before {
  91.     content: "";
  92.     background-color: #fff;
  93.     height: 100%;
  94.     width: 40px;
  95.     display: block;
  96.     position: absolute;
  97.     top: 0;
  98.     left: -70px;
  99.     transform: skewX(-45deg) translateX(0px);
  100.     transition: none;
  101. }
  102. .btn:hover:before{
  103.     transform: skewX(-45deg) translateX(250px);
  104.     transition: all 0.4s ease-in;
  105. }
  106. footer
  107. {
  108.     width: 100%;
  109.     bottom: 0;
  110.     position: absolute;
  111.     background-color: #3498db;
  112. }
  113. .stopa
  114. {
  115.     text-align: center;
  116.     font-size: 18px;
  117.     font-family: "Lato";
  118. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement