Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <title>FlaskovskiSemafor</title>
- <style>
- .button {
- display: inline-block;
- vertical-align: top;
- position: relative;
- overflow: hidden;
- width: 100px;
- height:100px;
- padding: 0 24px;
- font-size: 24px;
- color: white;
- text-align: center;
- text-decoration: none;
- text-shadow: 0 1px #154c86;
- background-color: #247edd;
- background-clip: padding-box;
- border: 1px solid;
- border-color: #1c65b2 #18589c #18589c;
- border-radius: 100%;
- -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
- 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));
- 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));
- 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));
- 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));
- }
- .button:before {
- content: '';
- position: absolute;
- top: -25%;
- bottom: -25%;
- left: -20%;
- right: -20%;
- border-radius: 50%;
- background: transparent;
- -webkit-box-shadow: inset 0 0 38px rgba(255, 255, 255, 0.5);
- box-shadow: inset 0 0 38px rgba(255, 255, 255, 0.5);
- }
- .button:hover {
- background-color: #1a74d3;
- }
- .button:active {
- color: rgba(255, 255, 255, 0.9);
- text-shadow: 0 -1px #154c86;
- background: #1f71c8;
- border-color: #113f70 #154c86 #1c65b2;
- -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.4);
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.4);
- background-image: -webkit-linear-gradient(top, #1a5da5, #3a8be0);
- background-image: -moz-linear-gradient(top, #1a5da5, #3a8be0);
- background-image: -o-linear-gradient(top, #1a5da5, #3a8be0);
- background-image: linear-gradient(to bottom, #1a5da5, #3a8be0);
- }
- .button:active:before {
- top: -50%;
- bottom: -125%;
- left: -15%;
- right: -15%;
- -webkit-box-shadow: inset 0 0 96px rgba(0, 0, 0, 0.2);
- box-shadow: inset 0 0 96px rgba(0, 0, 0, 0.2);
- }
- .button-green {
- text-shadow: 0 1px #0d4d09;
- background-color: #1ca913;
- border-color: #147b0e #11640b #11640b;
- }
- .button-green:hover {
- background-color: #159b0d;
- }
- .button-green:active {
- text-shadow: 0 -1px #0d4d09;
- background: #189210;
- border-color: #093606 #0d4d09 #147b0e;
- background-image: -webkit-linear-gradient(top, #126d0c, #20c016);
- background-image: -moz-linear-gradient(top, #126d0c, #20c016);
- background-image: -o-linear-gradient(top, #126d0c, #20c016);
- background-image: linear-gradient(to bottom, #126d0c, #20c016);
- }
- .button-red {
- text-shadow: 0 1px #72100d;
- background-color: #cd1d18;
- border-color: #9f1713 #891310 #891310;
- }
- .button-red:hover {
- background-color: #c01511;
- }
- .button-red:active {
- text-shadow: 0 -1px #72100d;
- background: #b61a15;
- border-color: #5b0d0b #72100d #9f1713;
- background-image: -webkit-linear-gradient(top, #921511, #e4201b);
- background-image: -moz-linear-gradient(top, #921511, #e4201b);
- background-image: -o-linear-gradient(top, #921511, #e4201b);
- background-image: linear-gradient(to bottom, #921511, #e4201b);
- }
- .button-yellow {
- text-shadow: 0 1px #706c0d;
- background-color: #ece662;
- border-color: #9f9913 #898410 #bfc011;
- }
- .button-yellow:hover {
- background-color: #c0b911;
- }
- .button-yellow:active {
- text-shadow: 0 -1px #706c0d;
- background-color: #ffff00;
- border-color: #9f9913 #898410 #bfc011;
- background-image: -webkit-linear-gradient(top, #9f9913 #898410);
- background-image: -moz-linear-gradient(top, #9f9913 #898410);
- background-image: -o-linear-gradient(top, #9f9913 #898410);
- background-image: linear-gradient(to bottom, #9f9913 #898410);
- }
- .button-semafor{
- background: #d8e0de;
- background: -moz-linear-gradient(top, #d8e0de 0%, #aebfbc 22%, #99afab 33%, #8ea6a2 50%, #829d98 67%, #4e5c5a 82%, #0e0e0e 100%);
- background: -webkit-linear-gradient(top, #d8e0de 0%,#aebfbc 22%,#99afab 33%,#8ea6a2 50%,#829d98 67%,#4e5c5a 82%,#0e0e0e 100%);
- background: linear-gradient(to bottom, #d8e0de 0%,#aebfbc 22%,#99afab 33%,#8ea6a2 50%,#829d98 67%,#4e5c5a 82%,#0e0e0e 100%);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8e0de', endColorstr='#0e0e0e',GradientType=0 );
- }
- .button-upalisve{
- background: #d8e0de;
- background: -moz-linear-gradient(top, #d8e0de 0%, #aebfbc 22%, #99afab 33%, #8ea6a2 50%, #829d98 67%, #4e5c5a 82%, #0e0e0e 100%);
- background: -webkit-linear-gradient(top, #d8e0de 0%,#aebfbc 22%,#99afab 33%,#8ea6a2 50%,#829d98 67%,#4e5c5a 82%,#0e0e0e 100%);
- background: linear-gradient(to bottom, #d8e0de 0%,#aebfbc 22%,#99afab 33%,#8ea6a2 50%,#829d98 67%,#4e5c5a 82%,#0e0e0e 100%);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8e0de', endColorstr='#0e0e0e',GradientType=0 );
- }
- .button-ugasisve{
- background: #d0e4f7;
- background: -moz-linear-gradient(top, hsla(209,71%,89%,1) 0%, hsla(208,71%,68%,1) 24%, hsla(208,91%,44%,1) 50%, hsla(208,70%,60%,1) 79%, hsla(208,70%,73%,1) 100%);
- background: -webkit-linear-gradient(top, hsla(209,71%,89%,1) 0%,hsla(208,71%,68%,1) 24%,hsla(208,91%,44%,1) 50%,hsla(208,70%,60%,1) 79%,hsla(208,70%,73%,1) 100%);
- background: linear-gradient(to bottom, hsla(209,71%,89%,1) 0%,hsla(208,71%,68%,1) 24%,hsla(208,91%,44%,1) 50%,hsla(208,70%,60%,1) 79%,hsla(208,70%,73%,1) 100%);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=0 );
- }
- #desno{
- float: right;
- }
- #levo{
- float: left;
- }
- #veliki{
- text-align: center;
- margin: auto;
- }
- </style>
- </head>
- <div id="veliki">
- <div id="levo">
- <form action="/upalicrveno">
- <input class="button button-red" type="submit" value="" >
- </form>
- <form action="/upalizuto">
- <input class="button button-yellow" type="submit" value="">
- </form>
- <form action="/upalizeleno">
- <input class="button button-green" type="submit" value="">
- </form>
- </div>
- <div id="desno">
- <form action="/upalisve">
- <input class="button button-upalisve" type="submit" value="Upali sve">
- </form>
- <form action="/ugasisve">
- <input class="button button-ugasisve" type="submit" value="Ugasi sve" >
- </form>
- <br><br>
- <form action="/upalisemafor">
- <input class="button button-semafor" type="submit" value="Upali semafor">
- </form>
- <form action="/ugasisve">
- <input class="button button-ugasisve" type="submit" value="Ugasi semafor" >
- </form>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement