API tools faq
paste
Srxon05

Final_index.html

Srxon05
Oct 23rd, 2017
49
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.48 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>FlaskovskiSemafor</title>
  4. <style>
  5. .button {
  6.             display: inline-block;
  7.             vertical-align: top;
  8.             position: relative;
  9.             overflow: hidden;
  10.             width: 100px;
  11.             height:100px;
  12.             padding: 0 24px;
  13.             font-size: 24px;
  14.             color: white;
  15.             text-align: center;
  16.             text-decoration: none;
  17.             text-shadow: 0 1px #154c86;
  18.             background-color: #247edd;
  19.             background-clip: padding-box;
  20.             border: 1px solid;
  21.             border-color: #1c65b2 #18589c #18589c;
  22.             border-radius: 100%;
  23.             -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
  24.             box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
  25.             background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
  26.             background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
  27.             background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
  28.             background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
  29.         }
  30.  
  31. .button:before {
  32.             content: '';
  33.             position: absolute;
  34.             top: -25%;
  35.             bottom: -25%;
  36.             left: -20%;
  37.             right: -20%;
  38.             border-radius: 50%;
  39.             background: transparent;
  40.             -webkit-box-shadow: inset 0 0 38px rgba(255, 255, 255, 0.5);
  41.             box-shadow: inset 0 0 38px rgba(255, 255, 255, 0.5);
  42.         }
  43.  
  44. .button:hover {
  45.             background-color: #1a74d3;
  46.         }
  47.        
  48. .button:active {
  49.             color: rgba(255, 255, 255, 0.9);
  50.             text-shadow: 0 -1px #154c86;
  51.             background: #1f71c8;
  52.             border-color: #113f70 #154c86 #1c65b2;
  53.             -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.4);
  54.             box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.4);
  55.             background-image: -webkit-linear-gradient(top, #1a5da5, #3a8be0);
  56.             background-image: -moz-linear-gradient(top, #1a5da5, #3a8be0);
  57.             background-image: -o-linear-gradient(top, #1a5da5, #3a8be0);
  58.             background-image: linear-gradient(to bottom, #1a5da5, #3a8be0);
  59.         }
  60.        
  61. .button:active:before {
  62.             top: -50%;
  63.             bottom: -125%;
  64.             left: -15%;
  65.             right: -15%;
  66.             -webkit-box-shadow: inset 0 0 96px rgba(0, 0, 0, 0.2);
  67.             box-shadow: inset 0 0 96px rgba(0, 0, 0, 0.2);
  68.         }
  69.        
  70. .button-green {
  71.             text-shadow: 0 1px #0d4d09;
  72.             background-color: #1ca913;
  73.             border-color: #147b0e #11640b #11640b;
  74.         }
  75.        
  76. .button-green:hover {
  77.             background-color: #159b0d;
  78.         }
  79.  
  80. .button-green:active {
  81.             text-shadow: 0 -1px #0d4d09;
  82.             background: #189210;
  83.             border-color: #093606 #0d4d09 #147b0e;
  84.             background-image: -webkit-linear-gradient(top, #126d0c, #20c016);
  85.             background-image: -moz-linear-gradient(top, #126d0c, #20c016);
  86.             background-image: -o-linear-gradient(top, #126d0c, #20c016);
  87.             background-image: linear-gradient(to bottom, #126d0c, #20c016);
  88.         }
  89.  
  90. .button-red {
  91.             text-shadow: 0 1px #72100d;
  92.             background-color: #cd1d18;
  93.             border-color: #9f1713 #891310 #891310;
  94.         }
  95.  
  96. .button-red:hover {
  97.             background-color: #c01511;
  98.         }
  99.  
  100. .button-red:active {
  101.             text-shadow: 0 -1px #72100d;
  102.             background: #b61a15;
  103.             border-color: #5b0d0b #72100d #9f1713;
  104.             background-image: -webkit-linear-gradient(top, #921511, #e4201b);
  105.             background-image: -moz-linear-gradient(top, #921511, #e4201b);
  106.             background-image: -o-linear-gradient(top, #921511, #e4201b);
  107.             background-image: linear-gradient(to bottom, #921511, #e4201b);
  108.         }
  109.  
  110.        
  111. .button-yellow {
  112.             text-shadow: 0 1px #706c0d;
  113.             background-color: #ece662;
  114.             border-color: #9f9913 #898410 #bfc011;
  115.         }
  116.        
  117. .button-yellow:hover {
  118.             background-color: #c0b911;
  119.         }
  120.        
  121. .button-yellow:active {
  122.             text-shadow: 0 -1px #706c0d;
  123.             background-color: #ffff00;
  124.             border-color: #9f9913 #898410 #bfc011;
  125.             background-image: -webkit-linear-gradient(top, #9f9913 #898410);
  126.             background-image: -moz-linear-gradient(top, #9f9913 #898410);
  127.             background-image: -o-linear-gradient(top, #9f9913 #898410);
  128.             background-image: linear-gradient(to bottom, #9f9913 #898410);
  129. }
  130.        
  131. .button-semafor{
  132.             background: rgb(255,183,107);
  133.             background: -moz-linear-gradient(top, rgba(255,183,107,1) 0%, rgba(255,167,61,1) 50%, rgba(255,124,0,1) 51%, rgba(255,127,4,1) 100%);
  134.             background: -webkit-linear-gradient(top, rgba(255,183,107,1) 0%,rgba(255,167,61,1) 50%,rgba(255,124,0,1) 51%,rgba(255,127,4,1) 100%);
  135.             background: linear-gradient(to bottom, rgba(255,183,107,1) 0%,rgba(255,167,61,1) 50%,rgba(255,124,0,1) 51%,rgba(255,127,4,1) 100%);
  136.             filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 );
  137. }
  138.  
  139. .button-semafor:hover{
  140.             background: rgb(255,168,76);
  141.             background: -moz-linear-gradient(top, rgba(255,168,76,1) 0%, rgba(255,123,13,1) 100%);
  142.             background: -webkit-linear-gradient(top, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
  143.             background: linear-gradient(to bottom, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
  144.             filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 );
  145. }    
  146.    
  147. .button-upalisve{
  148.              background: rgb(216,224,222);
  149.             background: -moz-linear-gradient(top, rgba(216,224,222,1) 0%, rgba(174,191,188,1) 22%, rgba(153,175,171,1) 33%, rgba(142,166,162,1) 50%, rgba(130,157,152,1) 67%, rgba(78,92,90,1) 82%, rgba(14,14,14,1) 100%);
  150.             background: -webkit-linear-gradient(top, rgba(216,224,222,1) 0%,rgba(174,191,188,1) 22%,rgba(153,175,171,1) 33%,rgba(142,166,162,1) 50%,rgba(130,157,152,1) 67%,rgba(78,92,90,1) 82%,rgba(14,14,14,1) 100%);
  151.             background: linear-gradient(to bottom, rgba(216,224,222,1) 0%,rgba(174,191,188,1) 22%,rgba(153,175,171,1) 33%,rgba(142,166,162,1) 50%,rgba(130,157,152,1) 67%,rgba(78,92,90,1) 82%,rgba(14,14,14,1) 100%);
  152.             filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8e0de', endColorstr='#0e0e0e',GradientType=0 );
  153. }
  154.    
  155. .button-upalisve:hover{
  156.             background: rgb(206,220,231);
  157.             background: -moz-linear-gradient(top, rgba(206,220,231,1) 0%, rgba(89,106,114,1) 100%);
  158.             background: -webkit-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%);
  159.             background: linear-gradient(to bottom, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%);
  160.             filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 );
  161. }
  162.  
  163. #desno{
  164.     float: right;  
  165. }
  166.  
  167. #levo{
  168.   float: left;
  169. }
  170. #veliki{
  171.     text-align: center;
  172.     margin: auto;
  173. }
  174. </style>
  175. </head>
  176.      
  177. <div id="veliki">
  178. <div id="levo">
  179.     <form action="/upalicrveno">
  180.     <input class="button button-red" type="submit" value="" >
  181.     </form>
  182.    
  183.     <form action="/upalizuto">
  184.     <input class="button button-yellow" type="submit"  value="">
  185.     </form>
  186.    
  187.     <form action="/upalizeleno">
  188.     <input class="button button-green" type="submit" value="">
  189.     </form>
  190.    
  191. </div>
  192. <div id="desno">
  193.     <form action="/upalisve">
  194.     <input  class="button button-upalisve" type="submit" value="">
  195.     </form>
  196.     <form action="/ugasisve">
  197.     <input  class="button button-ugasisve" type="submit" value="">
  198.     </form>
  199.     <form action="/upali">
  200.     <input  class="button button-semafor" type="submit" value="">
  201.     </form>
  202.     <form action="/ugasi">
  203.     <input  class="button button-semafor" type="submit" value="">
  204.     </form>
  205. </div>
  206. </div>
  207.    
  208. </body>
  209. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!