Advertisement
Guest User

shiny buttons + select menu

a guest
Dec 14th, 2019
135
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.24 KB | None | 0 0
  1. /* Stylish select menu! */
  2.  
  3. .select-css {
  4.     display: block;
  5.     font-size: 16px;
  6.     font-family: sans-serif;
  7.     font-weight: 700;
  8.     color: #444;
  9.     line-height: 1.3;
  10.     padding: .6em 1.4em .5em .8em;
  11.     width: 100%;
  12.     max-width: 100%;
  13.     box-sizing: border-box;
  14.     margin: 0;
  15.     border: 1px solid #aaa;
  16.     box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  17.     border-radius: .5em;
  18.     -moz-appearance: none;
  19.     -webkit-appearance: none;
  20.     appearance: none;
  21.     background-color: #fff;
  22.     background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
  23.       linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
  24.     background-repeat: no-repeat, repeat;
  25.     background-position: right .7em top 50%, 0 0;
  26.     background-size: .65em auto, 100%;
  27. }
  28. .select-css::-ms-expand {
  29.     display: none;
  30. }
  31. .select-css:hover {
  32.     border-color: #888;
  33. }
  34. .select-css:focus {
  35.     border-color: #aaa;
  36.     box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
  37.     box-shadow: 0 0 0 3px -moz-mac-focusring;
  38.     color: #222;
  39.     outline: none;
  40. }
  41. .select-css option {
  42.     font-weight:normal;
  43. }
  44.  
  45. /* That shiny button! :D */
  46. a.button-shiny {
  47.     width: 200px;
  48.     height: 50px;
  49.     background: #0070a7;
  50.     display: block;
  51.     position: relative;
  52.     margin: 50px auto 0;
  53.     overflow: hidden;
  54.     border: 1px solid #333333;
  55.     color: white;
  56.     text-decoration: none;
  57.    
  58.     -webkit-box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,.4);
  59.     -moz-box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,.4);
  60.     box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,.4);
  61.    
  62.     -webkit-border-radius: 4px;
  63.     -moz-border-radius: 4px;
  64.     border-radius: 4px;
  65.    
  66.    
  67.     -webkit-transition: all 0.2s ease;
  68.     -moz-transition: all 0.2s ease;
  69.     -ms-transition: all 0.2s ease;
  70.     -o-transition: all 0.2s ease;
  71.     transition: all 0.2s ease;
  72.    
  73.     background-image: -webkit-linear-gradient(bottom, #0070a7 0%, #0070a7 49%, #0092da 50%, #0092da 100%);
  74.     background-image: -moz-linear-gradient(bottom, #0070a7 0%, #0070a7 49%, #004e74 50%, #004e74 100%);
  75.     background-image: -ms-linear-gradient(bottom, #0070a7 0%, #0070a7 49%, #004e74 50%, #0070a7 100%);
  76.     background-image: -o-linear-gradient(bottom, #0070a7 0%, #0070a7 49%, #004e74 50%, #004e74 100%);
  77.     background-image: linear-gradient(bottom, #383838 0%, #0070a7 49%, #004e74 50%, #004e74 100%);
  78. }
  79.  
  80. a.button-shiny span.text {
  81.     position: absolute;
  82.     top: 16px;
  83.     left: 65px;
  84.     font: 15px Arial;
  85. }
  86.  
  87. a.button-shiny span.shine {
  88.     content: '';
  89.     position: absolute;
  90.     height: 400px;
  91.     width: 20px;
  92.     background: white;
  93.     top: -80px;
  94.     left: -20px;
  95.     display: block;
  96.     opacity: 0.8;
  97.    
  98.     -webkit-box-shadow: 0px 0px 20px 10px white;
  99.     -moz-box-shadow: 0px 0px 20px 10px white;
  100.     box-shadow: 0px 0px 20px 10px white;
  101.    
  102.     -webkit-transform: rotate(-45deg); 
  103.     -moz-transform: rotate(-45deg);
  104.     -ms-transform: rotate(-45deg);
  105.     -o-transform: rotate(-45deg);
  106.     transform: rotate(-45deg);
  107.    
  108.     -webkit-transition: all 0.4s ease;
  109.     -moz-transition: all 0.4s ease;
  110.     -ms-transition: all 0.4s ease;
  111.     -o-transition: all 0.4s ease;
  112.     transition: all 0.4s ease;
  113. }
  114.  
  115. a.button-shiny:hover {
  116.     -webkit-box-shadow: inset 0px 1px 10px 0px rgba(255,255,255,.4), 0px 3px 3px 0px rgba(0,0,0,0.4);
  117.     -moz-box-shadow: inset 0px 1px 10px 0px rgba(255,255,255,.4), 0px 3px 3px 0px rgba(0,0,0,0.4);
  118.     box-shadow: inset 0px 1px 10px 0px rgba(255,255,255,.4), 0px 3px 3px 0px rgba(0,0,0,0.4);
  119. }
  120.  
  121. a.button-shiny:active {
  122.     -webkit-box-shadow: inset 0px 1px 15px 0px rgba(0,0,0,.4), inset 0px 1px 1px 1px rgba(0,0,0,.2), 0px 1px 1px 0 rgba(255,255,255,.5);
  123.     -moz-box-shadow: inset 0px 1px 15px 0px rgba(0,0,0,.4), inset 0px 1px 1px 1px rgba(0,0,0,.2), 0px 1px 1px 0 rgba(255,255,255,.5);
  124.     box-shadow: inset 0px 1px 15px 0px rgba(0,0,0,.4), inset 0px 1px 1px 1px rgba(0,0,0,.2), 0px 1px 1px 0 rgba(255,255,255,.5);
  125. }
  126.  
  127. a.button-shiny:hover span.shine {
  128.     left: 170px;
  129.     top: -300px;
  130. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement