Скачать / Посмотреть на CodePen
See the Pen Stylized Buttons by Paraskevas Ntinakis (@perry_nt) on CodePen.
Сборник HTML, CSS, JavaScript/jQuery компонентов
Скачать / Посмотреть на CodePen
See the Pen Stylized Buttons by Paraskevas Ntinakis (@perry_nt) on CodePen.
А куда можно этот код добавить в WordPress?
А так, будто бы, даже интереснее.
.from-middle:after {
top: 0;
left: 50%;
height: 100%;
width: 0;
background: var(—inv);
transform: translateX(-50%);
}
.from-middle:hover:after {
width: 100%;
}
Как вставить кнопку в LPgenerator? Там есть, куда разместить скрипты html и отдельно есть поле, в котором можно прописать стили css для каждого элемента (для блоков, текстов, кнопок и т.д.) Кнопки красивые, а разобраться не могу, куда, что разместить 🙁
Я точно не знаю, как устроено в LPgenerator. Но суть размещения данных кнопок проста. В файле css нужно для начала прописать общие стили, которые указываются для всех кнопок. Это все что в разделе /* ~~~~~~~ INIT. BTN ~~~~~~~ */
.btn {
position: relative;
padding: 1.4rem 4.2rem;
padding-right: 3.1rem;
font-size: 1.4rem;
color: var(—inv);
letter-spacing: 1.1rem;
text-transform: uppercase;
transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
cursor: pointer;
user-select: none;
}
.btn:before, .btn:after {
content: »;
position: absolute;
transition: inherit;
z-index: -1;
}
.btn:hover {
color: var(—def);
transition-delay: .6s;
}
.btn:hover:before {
transition-delay: 0s;
}
.btn:hover:after {
background: var(—inv);
transition-delay: .4s;
}
А далее уже выбираете конкретную кнопку, например
/* From Top */
.from-top:before,
.from-top:after {
left: 0;
height: 0;
width: 100%;
}
.from-top:before {
bottom: 0;
border: 1px solid var(—inv);
border-top: 0;
border-bottom: 0;
}
.from-top:after {
top: 0;
height: 0;
}
.from-top:hover:before,
.from-top:hover:after {
height: 100%;
}
И уже в HTML файле выводите данную кнопку с помощью соответствующего кода <div class=»btn from-top»>From Top</div>
А можно внутри HTML разместить все без подключения файла css?
Просто к LPgenerator можно подключать файлы только с расширением txt, xml, htm, html
Да, можно, если прописать это все в
http://htmlbook.ru/html/style
А вообще, данные работы я размещаю для тех, кто уже хорошо разбирается в верстке сайтов, то есть для более менее опытных верстальщиков. На моем сайте нет обучающих материалов. Поэтому, чтобы применять данные работы — вам следует сначала изучить хоты бы начальные принципы верстки
Вы так снисходительны, спасибо большое! Извините за некомпетентность, я действительно не разбираюсь, просто очень кнопки красивые. У меня почти получилось вроде, здесь: http://www.tutmnogo-go.ru/black-mebel1/
только что-то не так. Взгляните, если не затруднит:
внутри тега head прописал следующее:
.btn {
position: relative;
padding: 1.4rem 4.2rem;
padding-right: 3.1rem;
font-size: 1.4rem;
color: var(—inv);
letter-spacing: 1.1rem;
text-transform: uppercase;
transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
cursor: pointer;
user-select: none;
}
.btn:before, .btn:after {
content: »;
position: absolute;
transition: inherit;
z-index: -1;
}
.btn:hover {
color: var(—def);
transition-delay: .6s;
}
.btn:hover:before {
transition-delay: 0s;
}
.btn:hover:after {
background: var(—inv);
transition-delay: .4s;
}
.from-top:before,
.from-top:after {
left: 0;
height: 0;
width: 100%;
}
.from-top:before {
bottom: 0;
border: 1px solid var(—inv);
border-top: 0;
border-bottom: 0;
}
.from-top:after {
top: 0;
height: 0;
}
.from-top:hover:before,
.from-top:hover:after {
height: 100%;
}
а затем в отдельном html-блоке код
From Top
и стиль у него прописал
style type=»text/css»
вот здесь:
http://joxi.ru/n2YbYgjijqj8pA
анимация не работает, но шрифт, как у кнопки…
Я вряд ли смогу что-то объяснить, учитывая что никогда не работал с данным конструктором — тут нужно сидеть и разбираться, как у них что устроено.
Последний вопрос. Может еще вот это надо куда-то разместить? Если да, то в каких тегах?
*, *:before, *:after {
box-sizing: border-box;
}
body {
—def: #96B7C4;
—inv: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
width: 100%;
background-image: linear-gradient(-25deg, #616161 0%, #96B7C4 100%);
}
html {
font-size: 12px;
font-family: ‘Playfair Display’, serif;
}
div {margin-bottom: 3rem;}
div:last-child {margin-bottom: 0;}
Нет, это общий стиль для body.