Home > Net >  How to create a CSS button with horizontally split colors
How to create a CSS button with horizontally split colors

Time:08-30

I am trying to do enter image description here

CodePudding user response:

Here is a basic snippet. Play with the style of the button as much as you want.

button .top{
  background: #5675ff;
  color:white;
  font-size: 20px;
  padding: 5px 20px
}
button .bottom{
  background:#ccc;
  padding: 5px 20px
}
button{
  padding:0;
  border:0;
  border-radius:15px;
  overflow:hidden;
}
<button >
  <div >BUY X</div>
  <div >I'm expensive!</div>
</button>

  • Related