साइड ड्रॉप डाउन मेनू के साथ CSS स्प्लिट बटन

Question

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

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

मैंने नीचे दो अलग-अलग बटनों का उपयोग करके स्निपेट लिखा था, जिसे मैंने 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>

html css

0

Fylix 16 अप्रैल 2020, 18:46

Answer 1

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

.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

Answer 2

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

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

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

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

1

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

साइड ड्रॉप डाउन मेनू के साथ CSS स्प्लिट बटन

2 जवाब

संबंधित सवाल

नए सवाल