Php button style color

Стилизация кнопок CSS

Стилизация ссылок и кнопок на примере разных сайтов с поддержкой разными состояний – наведение курсора, нажатие, попадание в фокус и заблокированное состояние элемента.

Скругленная кнопка

.btn < display: inline-block; box-sizing: border-box; padding: 0 25px; margin: 0 15px 15px 0; outline: none; border: 1px solid #fff; border-radius: 50px; height: 46px; line-height: 46px; font-size: 14px; font-weight: 600; text-decoration: none; color: #444; background-color: #fff; box-shadow: 0 4px 6px rgb(65 132 144 / 10%), 0 1px 3px rgb(0 0 0 / 8%); cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; vertical-align: top; transition: box-shadow 0.2s; >.btn:focus-visible < border: 1px solid #4c51f9; outline: none; >.btn:hover < transition: all 0.2s; box-shadow: 0 7px 14px rgb(65 132 144 / 10%), 0 3px 6px rgb(0 0 0 / 8%); >.btn:active < background-color: #808080; >.btn:disabled

Результат:

Двойная рамка

.btn < display: inline-block; box-sizing: border-box; padding: 1px; margin: 0 15px 15px 0; outline: none; border: 1px solid #F18230; border-radius: 25px; height: 46px; line-height: 0; font-size: 14px; font-weight: 500; text-decoration: none; color: #fff; background-color: #fff; position: relative; overflow: hidden; vertical-align: top; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; >.btn span < display: block; box-sizing: border-box; padding: 0 25px; height: 42px; line-height: 38px; border: 1px solid #F18230; border-radius: 25px; font-size: 14px; color: #FFFFFF; background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%), #F18230; text-align: center; font-weight: 600; >.btn:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn:hover span < background-color: #fba768 >.btn:active span < background-color: #c17237 !important; >.btn:disabled

Результат:

Yahoo

.btn < display: inline-block; box-sizing: border-box; padding: 0 20px; margin: 0 15px 15px 0; outline: none; border: none; border-radius: 4px; height: 32px; line-height: 32px; font-size: 14px; font-weight: 500; text-decoration: none; color: #fff; background-color: #3775dd; box-shadow: 0 2px #21487f; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; vertical-align: top; >.btn:hover < background-color: #002fed; >.btn:active < background-color: #2f599e !important; >.btn:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn:disabled

Результат:

Google

const buttons = document.querySelectorAll(".btn"); buttons.forEach((button) => < button.onclick = function(e)< let x = e.clientX - e.target.offsetLeft; let y = e.clientY - e.target.offsetTop; let ripple = document.createElement("span"); ripple.style.left = `$px`; ripple.style.top = `$px`; this.appendChild(ripple); setTimeout(function()< ripple.remove(); >, 600); > >);

.btn < display: inline-block; box-sizing: border-box; padding: 0 15px; margin: 0 15px 15px 0; outline: none; border: none; border-radius: 4px; height: 36px; line-height: 36px; font-size: 14px; font-weight: 500; text-decoration: none; color: #fff; background-color: #1a73e8; position: relative; overflow:hidden; vertical-align: top; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; z-index: 1; >.btn span < position: absolute; background: #fff; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; animation: btn_ripples 0.6s linear infinite; >@keyframes btn_ripples < 0% < width: 0px; height: 0px; opacity: 0.5; >100% < width: 1000px; height: 1000px; opacity: 0; >> .btn:hover < box-shadow: 0 1px 2px 0 rgb(26 115 232 / 45%), 0 1px 3px 1px rgb(26 115 232 / 30%); background-color: #297be6; >.btn:active < box-shadow: 0 1px 2px 0 rgb(26 115 232 / 45%), 0 2px 6px 2px rgb(26 115 232 / 30%); background-color: #1a73e8 !important; >.btn:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn:disabled

Результат:

Whatsapp

.btn < display: inline-block; box-sizing: border-box; padding: 0 24px; margin: 0 15px 15px 0; outline: none; border: none; border-radius: 3px; height: 37px; line-height: 37px; font-size: 14px; text-transform: uppercase; font-weight: normal; text-decoration: none; color: #07bc4c; background-color: #fff; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; transition: box-shadow .18s ease-out,background .18s ease-out,color .18s ease-out; >.btn:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn:hover < box-shadow: 0 1px 1px 0 #cfcfcf, 0 2px 5px 0 #cfcfcf; >.btn:active < background-color: #efefef !important; >.btn:disabled < background-color: #eee; color: #444; pointer-events: none; >.btn-2 < display: inline-block; box-sizing: border-box; padding: 0 24px; margin: 0 15px 15px 0; outline: none; border: none; border-radius: 3px; height: 37px; line-height: 37px; font-size: 14px; text-transform: uppercase; font-weight: normal; text-decoration: none; color: #fff; background-color: #05cd51; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; transition: box-shadow .18s ease-out,background .18s ease-out,color .18s ease-out; >.btn-2:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn-2:hover < box-shadow: 0 1px 1px 0 #cfcfcf, 0 2px 5px 0 #cfcfcf; >.btn-2:active < background-color: #058c38 !important; >.btn-2:disabled

Результат:

Facebook

.btn < display: inline-block; box-sizing: border-box; padding: 0 20px; margin: 0 15px 15px 0; outline: none; border: none; border-radius: 6px; height: 40px; line-height: 40px; font-size: 17px; font-weight: 600; text-decoration: none; color: #385898; background-color: #e7f3ff; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; >.btn:focus-visible < box-shadow: 0 0 0 2px #666; >.btn:hover < background-color: #DBE7F2; >.btn:active < transform: scale(0.96); >.btn:disabled

Результат:

Вконтакте

.btn < display: inline-block; box-sizing: border-box; padding: 0 16px; margin: 0 15px 15px 0; outline: none; border: none; border-radius: 4px; height: 30px; line-height: 30px; font-size: 12.5px; font-weight: normal; text-decoration: none; vertical-align: top; color: #55677d; background-color: #dfe6ed; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; overflow: hidden; >.btn:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn:hover < opacity: 0.88; >.btn:active < line-height: 32px; >.btn:disabled < pointer-events: none; opacity: 0.65; >.btn-2 < display: inline-block; box-sizing: border-box; padding: 0 16px; margin: 0 15px 15px 0; outline: none; border: none; border-radius: 4px; height: 30px; line-height: 30px; font-size: 12.5px; font-weight: normal; text-decoration: none; vertical-align: top; color: #fff; background-color: #5181b8; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; overflow: hidden; >.btn-2:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn-2:hover < opacity: 0.88; >.btn-2:active < line-height: 32px; >.btn-2:disabled

Результат:

Habr

.btn < display: inline-block; box-sizing: border-box; padding: 0 13px; margin: 0 15px 15px 0; outline: none; border: 1px solid #a4afba; border-radius: 3px; height: 32px; line-height: 32px; font-size: 14px; font-weight: 500; text-decoration: none; color: #838a92; background-color: #fff; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; >.btn:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn:hover < border-color: #65a3be; color: #4e879c; >.btn:active < border-color: #78a2b7 !important; color: #3a728b !important; >.btn:disabled < background-color: #eee; color: #444; pointer-events: none; >.btn-2 < display: inline-block; box-sizing: border-box; padding: 0 13px; margin: 0 15px 15px 0; outline: none; border: 1px solid transparent; border-radius: 3px; height: 32px; line-height: 32px; font-size: 14px; font-weight: 500; text-decoration: none; color: #fff; background-color: #65a3be; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; >.btn-2:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn-2:hover < border-color: transparent; background-color: #4986a1; color: #fff; >.btn-2:active < border-color: #6f9cbc !important; background-color: #367089 !important; >.btn-2:disabled

Результат:

Bootstrap

.btn < display: inline-block; box-sizing: border-box; padding: 0 15px; margin: 0 15px 15px 0; outline: none; border: 1px solid #6c757d; border-radius: 5px; height: 38px; line-height: 38px; font-size: 14px; font-weight: 600; text-decoration: none; color: #6c757d; background-color: #fff; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; >.btn:focus < box-shadow: 0 0 0 3px rgb(108 117 125 / 50%); >.btn:hover < color: #fff; background-color: #6c757d; border-color: #6c757d; >.btn:active < color: #fff; background-color: #6c757d; border-color: #6c757d; >.btn:disabled < pointer-events: none; opacity: 0.65; >.btn-2 < display: inline-block; box-sizing: border-box; padding: 0 15px; margin: 0 15px 15px 0; outline: none; border: 1px solid #7952b3; border-radius: 5px; height: 38px; line-height: 38px; font-size: 14px; font-weight: 600; text-decoration: none; color: #fff; background-color: #7952b3; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; >.btn-2:focus < box-shadow: 0 0 0 3px rgb(121 82 179 / 25%); >.btn-2:hover < background-color: #61428f; border-color: #61428f; >.btn-2:active < background-color: #61428f !important; border-color: #61428f !important; >.btn-2:disabled

Результат:

Instagram

body < padding: 15px 0; >.btn < text-decoration: none; color: #6b5770; background-image: linear-gradient(90deg, #fd7f34, #bd155b); display: inline-block; padding: 14px 30px; border: 1px solid; position: relative; z-index: 0; border-radius: 5px; box-sizing: border-box; margin: 0 15px 15px 0; outline: none; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; >.btn:before < content: ''; position: absolute; left: -2px; top: -2px; width: calc(100% + 4px); height: calc(100% + 4px); background: linear-gradient(90deg, #fd7f34, #bd155b); z-index: -2; transition: .4s; border-radius: 5px; >.btn:after < content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #fff, #fff); z-index: -1; transition: .4s; border-radius: 4px; >.btn:hover < color: #fff; transition: .3s; >.btn:hover:after < background: linear-gradient(90deg, #fd7f34, #bd155b); >.btn:active:after < background: linear-gradient(90deg, #d96d2d, #760f3a); >.btn:focus-visible < box-shadow: 0 0 0 3px #fd7f34; >.btn:disabled < pointer-events: none; >.btn:disabled:before

Результат:

Комментарии 1

Авторизуйтесь, чтобы добавить комментарий.

Другие публикации

В HTML5 появилось специальное поле input с атрибутом type=number для вода чисел. Рассмотрим его возможности.

Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а.

Ниже приведенная функция getPosition() получает текущие координаты курсора. Используя ее в разных jQuery событиях можно получить координаты клика или координаты курсора когда он находится над.

Источник

изменить цвет кнопки на клик и оставаться таким же для остальной части времени?

вот что я пытаюсь изменить цвет кнопки, чтобы пользователь мог видеть, что он уже нажал на кнопку. и даже если он обновит страницу, кнопка останется того же цвета, что и после первого щелчка. причина в том, что im показывает много кнопок на одной странице. вот мой код кнопки.

Для этого вы можете использовать localStorage и jQuery .

простой код:

///APPLY A CSS TO THE BUTTON WHEN ITS CLICKED////// $( "#someid" ).click(function() < $(this).addClass('myclass'); localStorage.setItem('clicked', '1'); >); ////YOU MIGHT WANT TO PUT THIS IN A DOCUMENT READY FUNCTION//// if(localStorage.getItem("clicked") != null)

РЕДАКТИРОВАТЬ:

Основываясь на ваших комментариях ниже, у вас уже есть стиль CSS на вашей кнопке. поэтому, чтобы убедиться, что новый CSS / цвет применяется к вашей кнопке при нажатии, все, что вам нужно сделать, это следующее:

Второе редактирование:

Код в последнем jsfiddle, который вы предоставили, отлично работает, если вы обязательно измените идентификатор кнопки:

В принципе, идентификатор вашей кнопки – myBtn но вы не используете этот идентификатор в коде jQuery. поэтому либо измените этот идентификатор на тот же идентификатор, который используется в коде jQuery, либо просто измените идентификатор, который используется в коде jQuery, на myBtn .

Это полностью зависит от того, насколько постоянным вы хотите, чтобы щелкнул цвет. Учитывая ваше дело, вы можете использовать cookies , cache или localStorage но данные в любом из них могут быть удалены пользователем или если пользователь использует какую-либо другую систему для входа в систему и нажатия кнопки, цвет нажатого может быть недоступен, поэтому лучшим решением для этой проблемы может быть ее сохранение в database поэтому каждый раз, когда пользователь входит в систему, цвет кнопки нажата будет постоянно изменен.

Если вы все еще хотите сделать это с помощью localStorage, вот ссылка, которая поможет вам: https://developer.mozilla.org/en-US/docs/Web/API/Storage

Это работает, чтобы изменить цвет и запомнить его, даже если вы обновляетесь с помощью F5.

Procced   

Если вы хотите, вы можете внести некоторую логику для изменения с каждым щелчком на следующий цвет. Для этого вам нужно изменить строку btnColor = ‘green’ с вашим кодом favorit.

$( "#myBtn" ).click(function() < $(this).addClass('myclass'); localStorage.setItem('clicked', '1'); >); if(localStorage.getItem("clicked") != null)

Источник

Change colour of a form button when record is saved

Hi, My layout.php form has many buttons it and a current date field, which all have a unique id/name. when the button is clicked it uses the id and date on the new.php, so when the record is saved it is saved relating to the id and date and other fields are filled in.
the save button takes the user back to layout.php and i want the button to change colour when the record is saved, it would need to use both button id and date because the user might not get all data entered in one day, therfore would have to go back to a particular date to see which buttons where done, as they would display a different colour. how can i do this?

• 3 Contributors
• 15 Replies
• 3K Views
• 1 Week Discussion Span
• Latest Post 11 Years Ago Latest Post by raphie

Recommended Answers Collapse Answers

I guess the information is stored in a database right?

If so query the database and if record is true echo a different state of the button:

I’m assuming that you want buttons to change colour when a particular section is completed? If so, query the DB for the particular id prior to showing the form.

You just check for valid entries in the relevant fields — if all OK, a variable:

I’d change the submit to buttons, but it may/should work. The name attribute should be ‘id[]’. IN your case the value and the label are the same thing if you’re using submit, so you just use value — no need for the label item in the array.

Also, I …

All 15 Replies

I guess the information is stored in a database right? If so query the database and if record is true echo a different state of the button:

This generate a list of all the records stored under the user, when click the button Edit will refresh the page then you have to have a code to receive the $_GET array to populate the form.

yes the information is stored in a database. So how does this code change the colour of a button, when a record is saved? Which page am i supposed to enter this on? layout.php or new.php? Also i dont have ‘title’ defined anywhere whats that for?

I’m assuming that you want buttons to change colour when a particular section is completed? If so, query the DB for the particular id prior to showing the form. You just check for valid entries in the relevant fields — if all OK, a variable:

array( ‘class’ => ‘btnInc’, ‘value’ => ’employment’, ‘id’ => ’employment’, ‘label’ => ‘Employment’, ), «personal» => array( ‘class’ => ‘btnInc’, ‘value’ => ‘personal’, ‘id’ => ‘personal’, ‘label’ => ‘Personal Info’, ), //. etc for other sections . ); //Individual section checks — check DB //set $buttons[. section. ][‘class’] to ‘btnDone’ $output=»»; foreach($buttons as $button)< $output .= "\n\t\" name=\"section[]\"> «; > ?> .btnInc < background-color: red; >.btnDone

yes relating to the date and button id which was clicked from layout.php, when saving record from new.php.

For example at the moment my code on layout.php looks like this for the buttons on my form:

So when the button is clicked it uses, the value and enters thats into another text box on new.php page. Then the record is saved using that id from the new.php page. So when the record gets saved, i need to button on layout.php page to change colour. I have entered your code into my page, does the code need to be in the head tag or above it? as its not doing anything at the moment. I have changed the array to:
«LRC1138» => array(
‘class’ => ‘btnInc’,
‘value’ => ‘LRC1138’,
‘id’ => ‘CMD_LRC1138’,
‘label’ => ‘LRC1138’, ),
«LRC1115» => array(
‘class’ => ‘btnInc’,
‘value’ => ‘LRC1115’,
‘id’ => ‘CMD_LRC1115’,
‘label’ => ‘LRC1115’, ), //. etc for other sections .
); Is that correct?

I’d change the submit to buttons, but it may/should work. The name attribute should be ‘id[]’. IN your case the value and the label are the same thing if you’re using submit, so you just use value — no need for the label item in the array. Also, I don’t see why you use in your html, you don’t have label data, so take them off — they’re used for pretty much everything other than buttons/submits. The code I supplied, was only a suggestion, I didn’t mean for you to go and change everything! 🙂 The php goes above all the html,
The style goes in the head (or to external css file)
The form in the body as commented in my previous post. You’ll need to pass the id and the date from newpage — perhaps via post if you are using a form for this purpose — pick up the variables and use them to create a record in MySQL, If the id is new, then you can skip all the mysql checking as there won’t be any data there anyway. So all buttons will be btnInc (incomplete). If the id is in the db (edit mode), then you DO need to check the db for previous data and change the colouring of certain buttons accordingly. How do you pass info to the buttons page for existing id/dates?

Источник

Изменение стиля по клику мыши

Делаю страницу бронирования билетов в кино. Все былеты берутся из базы данных.
Хочу чтоб при клике мышью(onclick) менялся стиль(class) блока .
Возникла проблема с изменением стиля, так как вместо имени стиля использую переменную.
Onclick попросту не работает. Подскажите, каким способом это можно исправить?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151

 header('Content-Type: text/html; charset=utf-8'); ?> html> head> title>Бронированиеtitle> head> style> div{ display: table-cell; vertical-align: middle; } div.otstup{ padding-left: 200px; } .box2{ border-radius: 4px; /* Радиус границ*/ margin-left: 4px; float:left; display:table-cell; vertical-align: middle; text-align: center; width: 40px; height:30px; } .box_free { background-image: url(free.png); border-radius: 4px; /* Радиус границ*/ margin-left: 4px; margin-top:4px; float:left; display:table-cell; vertical-align: middle; text-align: center; width: 30px; height:30px; border: 1px solid #888; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; cursor: pointer;} .box_free:hover { background-image: url(choice.jpg); -webkit-transform: scale(1.4); -moz-transform: scale(1.4); -o-transform: scale(1.4); } .box_select { background-image: url(select.jpg); border-radius: 4px; /* Радиус границ*/ margin-left: 4px; margin-top:4px; float:left; vertical-align: middle; text-align: center; width: 30px; height:30px; text-indent: 0px; border: 1px solid #888; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; cursor: pointer; } .box_select:hover { background-image: url(select.jpg); vertical-align: middle; -webkit-transform: scale(1.4); -moz-transform: scale(1.4); -o-transform: scale(1.4); } .box_busy { background-image: url(busy.png); border-radius: 6px; /* Радиус границ*/ margin-left: 4px; margin-top:4px; float:left; vertical-align: middle; text-align: center; width: 30px; height:30px; text-indent: 0px; border: 1px solid #888; } style> script type="text/javascript"> script> body text="black" background= "fone1.jpg"> br> h3 align="center">Выберете место для бронированияh3> div class="otstup">  echo'
'; @ $db = mysql_pconnect('localhost', 'root', ''); if (!$db) { echo 'Ошибка соединения с базой данных'; exit; } mysql_select_db('kino'); $query = "select * from tickets"; $result = mysql_query($query); $num_results = mysql_num_rows($result); $box2 = "box_select"; for ($i=0; $i $num_results; $i++) { $row = mysql_fetch_array($result); if($row['Conditions']==1) { $box = "box_busy"; } else{ $box = "box_free"; } if ($k==$row['Row']) { echo '
.$row['id_ticket'].'" >.$box.'" value="'.$row['Place'].'" onclick="">'.$row['Place'].'
 '; } else { echo'
'; echo '
.$row['Row'].' ряд
'; echo '
.$row['id_ticket'].'" >.$box.'" value="'.$row['Place'].'" onclick="">'.$row['Place'].'
'; $k=$row['Row']; } } echo'
'; echo''; ?> div> body> html>

Источник