Мне нужно сделать кнопку, которая бы выглядела одинаково в любом современном браузере и в любой ОС (appearance: button
- это не решение для меня!). Это 4 этапа (без отключенного этапа) кнопки, которую я хочу воссоздать.
Я сделал обертку, но есть проблема с градиентом .Это можно решить, скопировав изображение оригинальной кнопки и вставив его в качестве фона, но я думаю, что это плохое решение.Мое мнение таково, что градиент является лучшим решением для масштабирования, чем временная версия с: background-image: url('https://i.imgur.com/lmEjKKe.png')
.
//
function setBtnHover(element, value) {
//
element.dataset.hover = value;
}
//
var lastBtnMouseDown = null;
//
function setBtnMouseDown(element, value, e) {
//
if (element !== null) {
//
element.dataset.mouseDown = value;
//
if (value) {
//
if (lastBtnMouseDown !== null)
//
lastBtnMouseDown.dataset.click = false;
//
element.dataset.click = true;
//
lastBtnMouseDown = element;
}
//
e.stopPropagation();
//
} else if (!value) {
//
if (lastBtnMouseDown !== null) {
//
lastBtnMouseDown.dataset.mouseDown = value;
}
} else {
//
lastBtnMouseDown.dataset.click = false;
//
lastBtnMouseDown = null;
}
}
.button {
box-shadow: -1px -1px 0 0 rgba(0,0,0,0.05);
padding-left: 10px;
padding-right: 10px;
height: 22px;
box-sizing: border-box;
border: 1px solid #003c74;
display: inline-block;
color: #000000;
cursor: default;
text-align: center;
font: 13.3333px MS Shell Dlg \32;
padding-top: 2px;
border-radius: 3px;
background-image: url('https://i.imgur.com/3Jwqiw1.png');
-moz-user-select: none;
user-select: none;
}
.button[data-hover=false][data-click=true] {
background: radial-gradient(white 60%, blue 100%);
}
.button[data-hover=true][data-mouse-down=true] {
padding-left: 1px;
background-image: url('https://i.imgur.com/lmEjKKe.png');
}
.button[data-hover=true][data-mouse-down=false] {
background: radial-gradient(white 60%, orange 100%);
}
<body onmousedown="setBtnMouseDown(null, true)" onmouseup="setBtnMouseDown(null, false)">
<p style="padding-left: 1px;"><span class="button" data-hover="false" data-mouse-down="false" data-click="false" onmouseover="setBtnHover(this, true)" onmouseout="setBtnHover(this, false)" onmousedown="setBtnMouseDown(this, true, event)" onmouseup="setBtnMouseDown(this, false, event)">BUTTON</span></p>
<p><button>BUTTON</button></p>
</body>
JSFiddle: https://jsfiddle.net/0wd4m6qg/5/