Я составил подборку CSS кнопок, которые могут быть использованы в веб-проектах без применения JavaScript ☝
.button-container { position:relative; left:50%; margin-top:50px; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%) } .btn-gr { display:block; height:50px; width:186px; position:relative; overflow:hidden; text-decoration:none; text-transform:uppercase; letter-spacing:2px; color:#fff; font-size:14px; text-align:center; color:#fff } .btn-gr:after { position:absolute; content:''; display:inline-block; background:#3bade3; background:linear-gradient(45deg,#3bade3 0%,#576fe6 25%,#9844b7 51%,#ff357f 100%); height:50px; width:372px; z-index:-1; -webkit-transform:translateX(-280px); transform:translateX(-280px); transition:-webkit-transform 400ms ease-in; transition:transform 400ms ease-in; transition:transform 400ms ease-in,-webkit-transform 400ms ease-in } .btn-gr:hover:after { -webkit-transform:translateX(-200px); transform:translateX(-200px) } .btn-gr span { color:#fff; position:relative; top:16px }
Кнопка с градиентом
.push_button { position: relative; width:220px; height:40px; text-align:center; color:#FFF; text-decoration:none; line-height:43px; font-family:'Oswald', Helvetica; display: block; margin: 30px 0; } .push_button:before { background:#f0f0f0; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0)); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; -moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; position: absolute; content: ""; left: -6px; right: -6px; top: -6px; bottom: -10px; z-index: -1; } .push_button:active { -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset; top:5px; } .push_button:active:before{ top: -11px; bottom: -5px; content: ""; } .red_push { text-shadow:-1px -1px 0 #A84155; background: #D25068; text-transform: uppercase; border:1px solid #D25068; background-image:-webkit-linear-gradient(top, #F66C7B, #D25068); background-image:-moz-linear-gradient(top, #F66C7B, #D25068); background-image:-ms-linear-gradient(top, #F66C7B, #D25068); background-image:-o-linear-gradient(top, #F66C7B, #D25068); background-image:linear-gradient(to bottom, #F66C7B, #D25068); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5); -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5); box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5); } .red_push:hover { background: #F66C7B; color: #fff; background-image:-webkit-linear-gradient(top, #D25068, #F66C7B); background-image:-moz-linear-gradient(top, #D25068, #F66C7B); background-image:-ms-linear-gradient(top, #D25068, #F66C7B); background-image:-o-linear-gradient(top, #D25068, #F66C7B); background-image:linear-gradient(top, #D25068, #F66C7B); }
Кнопка с бликом
a.boot { -webkit-transform: translate3D(0, 0, 0); -webkit-backface-visibility: hidden; color: #2d2d2d; padding: 10px 0px; letter-spacing: 1px; text-transform: uppercase; font-weight: 400; font-size: 20px; position: relative; overflow: hidden; text-decoration: none; display: block; width: 260px; margin: 30px 0; text-align: center; } a.boot:after { padding: 0; border: 2px solid #000000; content: ''; width: 95%; height: 46px; display: block; position: absolute; z-index: -2; top: 0; left: 0; } a.boot:before { -webkit-transition: all 0s ease-in-out; -moz-transition: all 0s ease-in-out; -o-transition: all 0s ease-in-out; transition: all 0s ease-in-out; content: ''; width: 100%; height: 60px; display: block; position: absolute; z-index: -1; border-left: 15px solid white; box-shadow: -20px 30px 30px white; background: transparent; top: 0px; left: -15px; margin-left: -1px; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } a.boot:hover:before, a.boot:active:before, a.boot:focus:before { -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transform: translate(115%, 0); -moz-transform: translate(115%, 0); -ms-transform: translate(115%, 0); -o-transform: translate(115%, 0); transform: translate(115%, 0); }
.ccd { overflow: hidden; margin: 30px 0; position: relative; } a.ddott { display: block; text-transform: uppercase; line-height: 50px; height: 50px; width: 35%; overflow: hidden; text-align: center; text-decoration: none; font-weight: bold; text-shadow: 0 100px 0 #FFF,1px 76px 10px #000; color: #FFF; background: #ed1d25; border-right: 2px solid #FFF; border-left: 2px solid #FFF; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } a.ddott:hover { text-shadow: 0 50px 0 #FFF, 1px 51px 20px #FFF; margin-top: -50px; height: 100px; background: #222; }
Кнопка с анимацией загрузки
a.glo{ color:#00c6ff; padding: 15px 20px; text-transform: uppercase; width:350px; text-decoration:none; text-align:center; margin:30px 0; display: block; background-image: linear-gradient(to left,transparent,transparent 50%,#00c6ff 50%,#00c6ff); background-position: 100% 0; background-size: 200% 100%; transition: all .25s ease-in; font: 400 18px tahoma; border: 1px solid #00C6FF; } a.glo:hover { background-position: 0 0; color:#fff; }
#body_button{ background: #000; height: 300px; margin: 0; padding: 0; color: #ddf; background-color: #112; text-align: center; padding-top: 12vh; } .button_hola, .button_hola::before, .button_hola::after, .button_hola span, .button_hola span::before, .button_hola span::after { transition: all ease .5s; } .button_hola{ position: relative; display: inline-block; padding: 0.3em; margin: 1em; border: solid 1px; text-transform: uppercase; cursor: pointer; } .button_hola:hover { box-shadow: 0 0 5em .5em rgba(50,50,150,0.5); } .button_hola span { display: inline-block; width: 100%; padding: 0.6em 2em; } .button_hola:hover span { background-color: #fff; color: #112; } .button_hola::before, .button_hola::after, .button_hola span::before, .button_hola span::after { content: ''; position: absolute; border: 1px; } .button_hola::before, .button_hola span::before { border-style: solid none; } .button_hola::before, .button_hola span::after{ left: 0; top: -0.4em; width: 100%; height: calc(100% + 0.8em); } .button_hola::after, .button_hola span::after { border-style: none solid; } .button_hola::after, .button_hola span::before { top: 0; left: -0.4em; height: 100%; width: calc(100% + 0.8em); } .button_hola:hover::after, .button_hola:hover span::after { transform: scaleY(0); } .button_hola:hover::before, .button_hola:hover span::before { transform: scaleX(0); } .button_hola:hover span::after, .button_hola:hover span::before { opacity: 0; }
Комментарии ()