Скачал программу! Сделал примерную форму с кнопкой. В итоге html файл получился в 15 строк а css для одного поля и кнопки в 1600 слишнем строк кода. Хз теперь что тамв css надо а что нет.
Константин Г., получилось?
- Предыдущая
- 1
- 2
- 3
- Следующая
- Показаны 16-30 из 33
Константин Г., можно поиграться с отступами margin, padding и можно float
либо поле либо кнопку отцентровать как нужно...
потому что у поля отступ стоит 5% а у кнопки его нет) вот кнопка и позиционируется без отступа при переносе.стала левеее поля, вообщем вылезда вкрай кудато...
Я конечно не совсем понял что нужно сделать) поэтому советую наугад!)
в стили кнопки добавьте
width: 80%;
margin-left: 5%;
и верните свой
Кнопка появится под полем на всю длину поля...
Хотелосьбы кнопки фон сделать голубой а то уныло смотрится… такое можно?
.great_btn { background: linear-gradient #000(to bottom, #0bc408 0%,#09a206 100%); background-color: #000; color: #fff; font-size: 16px; text-shadow: 0 1px 0 #757575; padding: 4px 0 5px 0;/* Менять надо тут*/ margin: 0; cursor: pointer; border: 0; position: center; box-shadow: 0 -1px 0 #0e780c, 0 1px 0 #000; width: 15px; border-radius: 2px; }
padding: 4px 0 5px 0;
Указывайте нужное вам и будет счастье.
Фон кнопки задан чёрный тут
background-color: #000;
Скруглить углы можно добавив строку
border-radius:5px /* Сколько пикселей выбирайте сами*/
background: linear-gradient #000(to bottom, #0bc408 0%,#09a206 100%);
Константин Г., обращайтесь.
Скруглить углы можно добавив строку
Градиент кнопки настраивается в этой строке
border-radius:5px /* Сколько пикселей выбирайте сами*/
background: linear-gradient #000(to bottom, #0bc408 0%,#09a206 100%);
Спасибо.
И напоследок немного забавы.
Добавьте нижеуказанный код в ваш файл и если никто не соизволит нажать на кнопку в течении 10 секунд — она небрежно отвалится.
@-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); opacity: 0; } } @-moz-keyframes hinge { 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 100% { -moz-transform: translateY(700px); opacity: 0; } } @-o-keyframes hinge { 0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 100% { -o-transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } 100% { transform: translateY(700px); opacity: 0; } } .great_btn { -webkit-animation-name: hinge; -moz-animation-name: hinge; -o-animation-name: hinge; animation-name: hinge; } .great_btn{ -webkit-animation-duration:2s; -moz-animation-duration:2s; -ms-animation-duration:2s; -o-animation-duration:2s; animation-duration:2s; } .great_btn{ } .great_btn{ -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -ms-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; animation-fill-mode:forwards; } .great_btn{ -webkit-animation-delay:10s; -moz-animation-delay:10s; -ms-animation-delay:10s; -o-animation-delay:10s; animation-delay:10s; }
Да нету за что.
И напоследок немного забавы.
Добавьте нижеуказанный код в ваш файл и если никто не соизволит нажать на кнопку в течении 10 секунд — она небрежно отвалится.
@-webkit-keyframes hinge { Пример тут http://modx.web1.by/button/
а сделать читобы она мигала через 15 сек
@-webkit-keyframes flash { 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} } @-moz-keyframes flash { 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} } @-o-keyframes flash { 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} } @keyframes flash { 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} } .flash { -webkit-animation-name: flash; -moz-animation-name: flash; -o-animation-name: flash; animation-name: flash; -webkit-animation-duration:2s; -moz-animation-duration:2s; -ms-animation-duration:2s; -o-animation-duration:2s; animation-duration:2s; /* Задержка анимации */ -webkit-animation-delay:15s; -moz-animation-delay:15s; -ms-animation-delay:15s; -o-animation-delay:15s; animation-delay:15s; }
@-webkit-keyframes tada { 0% {-webkit-transform: scale(1);} 10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);} 100% {-webkit-transform: scale(1) rotate(0);} } @-moz-keyframes tada { 0% {-moz-transform: scale(1);} 10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);} 100% {-moz-transform: scale(1) rotate(0);} } @-o-keyframes tada { 0% {-o-transform: scale(1);} 10%, 20% {-o-transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);} 100% {-o-transform: scale(1) rotate(0);} } @keyframes tada { 0% {transform: scale(1);} 10%, 20% {transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} 100% {transform: scale(1) rotate(0);} } .tada { -webkit-animation-name: tada; -moz-animation-name: tada; -o-animation-name: tada; animation-name: tada; -webkit-animation-duration:0.5s; -moz-animation-duration:0.5s; -ms-animation-duration:0.5s; -o-animation-duration:0.5s; animation-duration:0.5s; }
Следует обратить внимание на конструкцию. Кнопка завёрнута в <div>
<div class=" tada"> <button type="button" class="flash"> Халява! Жми! </button> </div>
Всё это свойства анимации CSS3, и если вас это заинтересовало — ищите мануалы по запросу CSS3 анимация.
Задержка, если вы внимательно посмотрите на первый код в прошлом сообщении, указывается с помощью строк.
/* Задержка анимации */ -webkit-animation-delay:15s; -moz-animation-delay:15s; -ms-animation-delay:15s; -o-animation-delay:15s; animation-delay:15s;
- Предыдущая
- 1
- 2
- 3
- Следующая
- Показаны 16-30 из 33