How can I make a split button by using html & css only?

Question

I was wondering how to make a split button by using html & css only? Below is the code that I have so far:

HTML:

      <input type="button" id="butt1" name="splitbutton1" value="Test">
        <select id="splitbutton1select" name="splitbutton1select">
            <option value="0">Test1</option>
            <option value="1">Test2</option>
        </select>

CSS:

          #butt1{
     width: 45%;
     height: 5%;
     margin-left: 150px;
     font-size: xx-large;
     font-family: sans-serif;
     margin-bottom: 75px; 
     }

mohit · Accepted Answer · 2015-04-17 15:09:32Z

1

What i understood, i think you need this-

<style>
#butt1{
     width: 10%;
     height: 10%;
     margin-left: 150px;
     font-family: sans-serif;
     margin-bottom: 75px; 
     float:left;
     border: 0 none;
     background-color:#eee;
}
#splitbutton1select{
    border: 0 none;
    float:left;
    background-color:#eee;
    width: 5%;
    height: 10%;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}
</style>

For more fancy go to this link

answered Apr 17, 2015 at 15:09

mohit

1,9681 gold badge17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Steve Stanbury · Accepted Answer · 2017-04-20 13:01:04Z

It totally depends on what the split buttons are for. I coded up a quick version of what I consider to be a split button, I hope it helps

https://codepen.io/stevestan/pen/QvNbGV?editors=1100

   <div class="home-bottom">
<div class="cool-but">
   <ul>
     <li class="z1"> <a href="">Reserve a Table</a></li>
     <li class="z2"> or </li>
     <li class="z3"> <a href="">Come &amp; Find Us</a></li>
   </ul>
</div>

 .cool-but {
  margin: 0 auto;
  display: block;
  width: 450px; }
  .cool-but ul .z1 {
    list-style: none;
    display: inline-block; }
    .cool-but ul .z1 a {
      background-color: #ea7f0a;
      padding: 1em 2em 1em 2em;
      color: white;
      margin-right: -10px;
      text-transform: uppercase;
      font-size: 0.8em;
      -webkit-border-radius: 10px;
      -webkit-border-top-left-radius: 50px;
      -webkit-border-bottom-left-radius: 50px;
      -moz-border-radius: 10px;
      -moz-border-radius-topleft: 50px;
      -moz-border-radius-bottomleft: 50px;
      border-radius: 10px;
      border-top-left-radius: 50px;
      border-bottom-left-radius: 50px; }
    .cool-but ul .z1 a:hover {
      background-color: #cc4b19 !important; }
  .cool-but ul .z2 {
    list-style: none;
    display: inline-block;
    position: relative;
    z-index: 99;
    background-color: #21387c;
    border-radius: 50px;
    padding: 1em;
    color: white;
    width: 60px;
    text-align: center; }
  .cool-but ul .z3 {
    list-style: none;
    display: inline-block;
    text-transform: uppercase;
    font-size: 0.8em; }
    .cool-but ul .z3 a {
      background-color: #ea7f0a;
      padding: 1em 2em 1em 2em;
      color: white;
      margin-left: -10px;
      -webkit-border-radius: 50px;
      -webkit-border-top-left-radius: 10px;
      -webkit-border-bottom-left-radius: 10px;
      -moz-border-radius: 50px;
      -moz-border-radius-topleft: 10px;
      -moz-border-radius-bottomleft: 10px;
      border-radius: 50px;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px; }
    .cool-but ul .z3 a:hover {
      background-color: #cc4b19; }

"Split Button" means a button with a dropdown on the side, including one main action and multiple alternative actions on the side. This is literally a 'split' button, but this is not what the OP meant.

Collectives™ on Stack Overflow

How can I make a split button by using html & css only?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related