Поиск (р) Гребенев
Материал из Wiki
(Различия между версиями)
(Новая страница: «<h1> Ссылка на поиск на русском языке: </h1> [https://docs.google.com/document/d/1nlPzXYMFnMsRdvQkdXFvD4Eo3nwRuKY9UV1R-Y6EgtA/edit?usp=…») |
|||
| Строка 1: | Строка 1: | ||
| − | < | + | <strong> Ссылка на поиск на русском языке: </strong> |
| + | |||
| + | <style> | ||
| + | .custom-btn { | ||
| + | width: 130px; | ||
| + | height: 40px; | ||
| + | color: #fff; | ||
| + | border-radius: 5px; | ||
| + | padding: 10px 25px; | ||
| + | font-family: 'Lato', sans-serif; | ||
| + | font-weight: 500; | ||
| + | background: transparent; | ||
| + | cursor: pointer; | ||
| + | transition: all 0.3s ease; | ||
| + | position: relative; | ||
| + | display: inline-block; | ||
| + | box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), | ||
| + | 7px 7px 20px 0px rgba(0,0,0,.1), | ||
| + | 4px 4px 5px 0px rgba(0,0,0,.1); | ||
| + | outline: none; | ||
| + | } | ||
| + | /* 3 */ | ||
| + | .btn-3 { | ||
| + | background: rgb(0,172,238); | ||
| + | background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%); | ||
| + | width: 130px; | ||
| + | height: 40px; | ||
| + | line-height: 42px; | ||
| + | padding: 0; | ||
| + | border: none; | ||
| + | |||
| + | } | ||
| + | .btn-3 span { | ||
| + | position: relative; | ||
| + | display: block; | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | } | ||
| + | .btn-3:before, | ||
| + | .btn-3:after { | ||
| + | position: absolute; | ||
| + | content: ""; | ||
| + | right: 0; | ||
| + | top: 0; | ||
| + | background: rgba(2,126,251,1); | ||
| + | transition: all 0.3s ease; | ||
| + | } | ||
| + | .btn-3:before { | ||
| + | height: 0%; | ||
| + | width: 2px; | ||
| + | } | ||
| + | .btn-3:after { | ||
| + | width: 0%; | ||
| + | height: 2px; | ||
| + | } | ||
| + | .btn-3:hover{ | ||
| + | background: transparent; | ||
| + | box-shadow: none; | ||
| + | } | ||
| + | .btn-3:hover:before { | ||
| + | height: 100%; | ||
| + | } | ||
| + | .btn-3:hover:after { | ||
| + | width: 100%; | ||
| + | } | ||
| + | .btn-3 span:hover{ | ||
| + | color: rgba(2,126,251,1); | ||
| + | } | ||
| + | .btn-3 span:before, | ||
| + | .btn-3 span:after { | ||
| + | position: absolute; | ||
| + | content: ""; | ||
| + | left: 0; | ||
| + | bottom: 0; | ||
| + | background: rgba(2,126,251,1); | ||
| + | transition: all 0.3s ease; | ||
| + | } | ||
| + | .btn-3 span:before { | ||
| + | width: 2px; | ||
| + | height: 0%; | ||
| + | } | ||
| + | .btn-3 span:after { | ||
| + | width: 0%; | ||
| + | height: 2px; | ||
| + | } | ||
| + | .btn-3 span:hover:before { | ||
| + | height: 100%; | ||
| + | } | ||
| + | .btn-3 span:hover:after { | ||
| + | width: 100%; | ||
| + | } | ||
| + | </style> | ||
| + | |||
| + | |||
| + | <button class="custom-btn btn-3"><span>Кнопка 3</span></button> | ||
| + | |||
| + | |||
| + | |||
[https://docs.google.com/document/d/1nlPzXYMFnMsRdvQkdXFvD4Eo3nwRuKY9UV1R-Y6EgtA/edit?usp=sharing] | [https://docs.google.com/document/d/1nlPzXYMFnMsRdvQkdXFvD4Eo3nwRuKY9UV1R-Y6EgtA/edit?usp=sharing] | ||
Версия 22:36, 20 сентября 2022
Ссылка на поиск на русском языке:
<style> .custom-btn {
width: 130px; height: 40px; color: #fff; border-radius: 5px; padding: 10px 25px; font-family: 'Lato', sans-serif; font-weight: 500; background: transparent; cursor: pointer; transition: all 0.3s ease; position: relative; display: inline-block; box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1); outline: none;
} /* 3 */ .btn-3 {
background: rgb(0,172,238);
background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
width: 130px; height: 40px; line-height: 42px; padding: 0; border: none;
} .btn-3 span {
position: relative; display: block; width: 100%; height: 100%;
} .btn-3:before, .btn-3:after {
position: absolute; content: ""; right: 0; top: 0; background: rgba(2,126,251,1); transition: all 0.3s ease;
} .btn-3:before {
height: 0%; width: 2px;
} .btn-3:after {
width: 0%; height: 2px;
} .btn-3:hover{
background: transparent; box-shadow: none;
} .btn-3:hover:before {
height: 100%;
} .btn-3:hover:after {
width: 100%;
} .btn-3 span:hover{
color: rgba(2,126,251,1);
} .btn-3 span:before, .btn-3 span:after {
position: absolute; content: ""; left: 0; bottom: 0; background: rgba(2,126,251,1); transition: all 0.3s ease;
} .btn-3 span:before {
width: 2px; height: 0%;
} .btn-3 span:after {
width: 0%; height: 2px;
} .btn-3 span:hover:before {
height: 100%;
} .btn-3 span:hover:after {
width: 100%;
} </style>
<button class="custom-btn btn-3">Кнопка 3</button>
