ლამაზი ღილაკი 2025-07-08 |
დასახელება: ლამაზი ღილაკი ავტორი: lazara სისტემა: ucoz აღწერა:ეს არის ლამაზი ღილაკი შეგიძლიათ ჩაწეროთ ნებისმიერი სიტყვა და ჩასვათ ნებისმიერ ადგილას ულამაზესი იქნება გადმოწერის ღილაკად.დააყენეთ და შეაფასეთ Code <style type="text/css"> section, section div{ box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -webkit-transition:.6s; -moz-transition:.6s; -o-transition:.6s; transition:.6s; } section, button{ -webkit-transition-timing-function:ease; -moz-transition-timing-function:ease; -o-transition-timing-function:ease; transition-timing-function:ease; } section{ text-align:center; display:inline-block; position:relative; padding:.375rem .375rem 0; height:2.5rem; width:200px; background:#A9ADB6; -webkit-border-radius:.25rem; -moz-border-radius:.25rem; border-radius:.25rem; -webkit-perspective:300; -moz-perspective:300; -ms-perspective:300; -o-perspective:300; perspective:300; -webkit-box-shadow:0 -1px 2px #fff, inset 0 1px 2px rgba(0,0,0,.2), inset 0 .25rem 1rem rgba(0,0,0,.1); -moz-box-shadow:0 -1px 2px #fff, inset 0 1px 2px rgba(0,0,0,.2), inset 0 .25rem 1rem rgba(0,0,0,.1); box-shadow:0 -1px 2px #fff, inset 0 1px 2px rgba(0,0,0,.2), inset 0 .25rem 1rem rgba(0,0,0,.1); } .button{ opacity:0; } .button a{ color:#444; text-decoration:none; line-height:25px; } .cover{ position:absolute; top:0; right:0; bottom:0; left:0; -webkit-transform-origin:center bottom; -moz-transform-origin:center bottom; -ms-transform-origin:center bottom; -o-transform-origin:center bottom; transform-origin:center bottom; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; -o-transform-style:preserve-3d; transform-style:preserve-3d; font-size:1.25em; color:white; line-height:37px; text-align:center; pointer-events:none; z-index:100; } .innie, .outie, .spine, .shadow{ position:absolute; width:100%; } .innie, .outie{ height:100%; background-image:-webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,.1) 100%); -webkit-border-radius:.25rem; -moz-border-radius:.25rem; border-radius:.25rem; } .innie:after, .outie:after{ content:"ვებ სამყარო"; } .innie{ background-color:#67E2FE; text-shadow:0 -2px 4px rgba(0,0,0,.2); } .spine{ top:.25rem; background:#20C7F3; height:.25rem; -webkit-transform:rotateX(90deg); -moz-transform:rotateX(90deg); -ms-transform:rotateX(90deg); -o-transform:rotateX(90deg); transform:rotateX(90deg); -webkit-transform-origin:center top; -moz-transform-origin:center top; -ms-transform-origin:center top; -o-transform-origin:center top; transform-origin:center top; } .shadow{ top:100%; left:0; height:3.5rem; -webkit-transform-origin:center top; -moz-transform-origin:center top; -ms-transform-origin:center top; -o-transform-origin:center top; transform-origin:center top; -webkit-transform:rotateX(90deg); -moz-transform:rotateX(90deg); -ms-transform:rotateX(90deg); -o-transform:rotateX(90deg); transform:rotateX(90deg); opacity:0; z-index:0; background-image:-webkit-linear-gradient(top, rgba(0,0,0,.6) 0%, transparent 100%); background-image:linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 100%); /*border-radius*/ -webkit-border-radius:.4rem; -moz-border-radius:.4rem; border-radius:.4rem; } .outie{ background-color:#2EC8FA; -webkit-transform:translateZ(.25rem); -moz-transform:translateZ(.25rem); -ms-transform:translateZ(.25rem); -o-transform:translateZ(.25rem); transform:translateZ(.25rem); text-shadow:0 2px 4px rgba(0,0,0,.2); } section:hover{ background:#EBEFF2; } section:hover .button{ opacity:1; } section:hover .cover, section:hover .innie, section:hover .spine, section:hover .outie, section:hover .spine{ -webkit-transition-timing-function:cubic-bezier(.2,.7,.1,1.1); -moz-transition-timing-function:cubic-bezier(.2,.7,.1,1.1); -o-transition-timing-function:cubic-bezier(.2,.7,.1,1.1); transition-timing-function:cubic-bezier(.2,.7,.1,1.1); } section:hover .cover{ -webkit-transform:rotateX(-120deg); -moz-transform:rotateX(-120deg); -ms-transform:rotateX(-120deg); -o-transform:rotateX(-120deg); transform:rotateX(-120deg); } section:hover .innie{ background-color:#3ADAFC; } section:hover .spine{ background-color:#52B1E0; } section:hover .outie{ background-color:#2174A0; color:rgba(255,255,255,0); } section:hover .shadow{ opacity:1; -webkit-transform:rotateX(45deg) scale(.95); -moz-transform:rotateX(45deg) scale(.95); -ms-transform:rotateX(45deg) scale(.95); -o-transform:rotateX(45deg) scale(.95); transform:rotateX(45deg) scale(.95); } </style> <section> <div class="button"> <a href="#">GELESSON.NET</a> </div> <div class="cover"> <div class="innie"></div> <div class="spine"></div> <div class="outie"></div> </div> <div class="shadow"></div> </section> |
სულ კომენტარები: 1 | |