मुझे निम्नलिखित विशेषताओं वाला एक बटन चाहिए:

  • उपयोगकर्ता बटन के बाएं हिस्से - "संपादित करें" पर क्लिक करता है और यह उन्हें एक रूप में ले जाता है।
  • उपयोगकर्ता दाहिने हिस्से पर क्लिक करता है और इसमें एक उप सूची मेनू का ड्रॉप डाउन होता है।

मैंने नीचे दो अलग-अलग बटनों का उपयोग करके स्निपेट लिखा था, जिसे मैंने w3school से लिया था और यह ऐसा लगता है कि मुझे क्या चाहिए सिवाय इसके:

  • जब मैं इसे होवर करता हूं, तो प्रत्येक बटन का एक साथ करने के बजाय स्वतंत्र रूप से अपना स्वयं का होवर व्यवहार होता है।
  • जब मैं अपने ब्राउज़र में रहता हूं, तो यह बटन अलग-अलग पंक्तियों में टूट जाता है।

enter image description here

मैं इन कमियों को कैसे ठीक कर सकता हूं? या बेहतर अभी तक अगर इस तरह का कोई आउट ऑफ द बॉक्स बटन है? मैंने "साइड मेनू के साथ बटन", "बटन साइड ड्रॉपडाउन", बटन उप मेनू "ect .. पर Google की कोशिश की लेकिन अब तक कोई भाग्य नहीं है।

.leftSideButton {
	box-shadow:inset 0px 1px 3px 0px #91b8b3;
	background:linear-gradient(to bottom, #68c6d0 5%, #55a2aa 100%);
	background-color:#64c1c9;
	border-radius:5px 2px 2px 5px;
	border:1px solid #566963;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:11px 23px;
	text-decoration:none;
	text-shadow:0px -1px 0px #2b665e;
  
}
.leftSideButton:hover {
	background:linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%);
	background-color:#6c7c7c;
}
.leftSideButton:active {
	position:relative;
	top:1px;
}


.rightSideButton {
	box-shadow:inset 0px 1px 3px 0px #91b8b3;
	background:linear-gradient(to bottom, #68c6d0 5%, #55a2aa 100%);
	background-color:#64c1c9;
	border-radius:2px 5px 5px 2px;
	border:1px solid #566963;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:11px 13px;
	text-decoration:none;
	text-shadow:0px -1px 0px #2b665e;
  margin-left: -4px;
}

.rightSideButton:hover {
	background:linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%);
	background-color:#6c7c7c;
}
.rightSideButton:active {
	position:relative;
	top:1px;
}
        
.splitButton{
    display: block;
}

.btn-group leftSideButton:hover {
 	background:linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%);
	background-color:#6c7c7c;
}
<html>

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<div class="btn-group">
<button class="leftSideButton">Edit</button>
  <button class="rightSideButton">
<i class="fa fa-caret-down"></i>
  </button>
</div>
</body>
</html>
0
Fylix 16 अप्रैल 2020, 18:46

2 जवाब

सबसे बढ़िया उत्तर

होवर को पैरेंट डिव में ले जाएं और फिर दोनों बटनों पर स्टाइल लागू करें।

.leftSideButton {
  box-shadow: inset 0px 1px 3px 0px #91b8b3;
  background: linear-gradient(to bottom, #68c6d0 5%, #55a2aa 100%);
  background-color: #64c1c9;
  border-radius: 5px 2px 2px 5px;
  border: 1px solid #566963;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  padding: 11px 23px;
  text-decoration: none;
  text-shadow: 0px -1px 0px #2b665e;
}

.leftSideButton:active {
  position: relative;
  top: 1px;
}

.rightSideButton {
  box-shadow: inset 0px 1px 3px 0px #91b8b3;
  background: linear-gradient(to bottom, #68c6d0 5%, #55a2aa 100%);
  background-color: #64c1c9;
  border-radius: 2px 5px 5px 2px;
  border: 1px solid #566963;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  padding: 11px 13px;
  text-decoration: none;
  text-shadow: 0px -1px 0px #2b665e;
  margin-left: -4px;
}

.rightSideButton:hover {
  background: linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%);
  background-color: #6c7c7c;
}

.rightSideButton:active {
  position: relative;
  top: 1px;
}

.splitButton {
  display: block;
}


/* changes */

.btn-group {
  /* Shrink the parent to fit the content */
  display: inline-flex;
}

.btn-group:hover .rightSideButton,
.btn-group:hover .leftSideButton {
  background: linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%);
  background-color: #6c7c7c;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="btn-group">
  <button class="leftSideButton">Edit</button>
  <button class="rightSideButton">
    <i class="fa fa-caret-down"></i>
  </button>
</div>
1
Zohir Salak 16 अप्रैल 2020, 19:42

जब मैं इसे होवर करता हूं, तो प्रत्येक बटन का एक साथ करने के बजाय स्वतंत्र रूप से अपना स्वयं का होवर व्यवहार होता है।

अपने सीएसएस से .btn-group leftSideButton:hover{...} हटाएं। आपके पास पहले से घोषित प्रत्येक बटन के लिए यह होवर प्रभाव पहले से ही है।

जब मैं अपने ब्राउज़र में रहता हूं, तो यह बटन अलग-अलग पंक्तियों में टूट जाता है।

अपने सीएसएस में .btn-group{ display: flex; flex-wrap: nowrap; } जोड़ें।

1
t k 16 अप्रैल 2020, 19:29