<ul>
  <li class="a">Put on!</li>
  <li class="a">Same</li>
</ul>
li {
    display : block;/*横並びにする場合はinline-blockに*/
    background: #BE9326; 
    color: #FFFBD5; 
    width: 280px;
    padding-left: 20px;/*左側に装飾を重ねるので、その分テキストの左側にスペースを作ります*/
    line-height: 66px;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    position: relative;
    overflow: hidden; /*はみ出る部分を隠しておきます*/
}
/*左側の背景部分*/
.a::before {
    display: block;
    content: "Click here!";
    background: #74653D;
    width: 266px;
    height: 66px;
    border-radius: 0 33px 33px 0;
    text-indent: -1.5em; /*字下げでテキストの位置を調節*/
    position: absolute;
    left: -200px; /*左のほうにずらして隠しておきます*/
    transition: all 0.5s;
}
/*左側の丸*/
.a::after {
    display: block;
    content: "";
    background: #BE9326;
    width: 14px;
    height: 14px;
    border-radius: 7px;
    position: absolute;
    top: 28px;
    left: 25px;
    transition: all 0.5s;
}
.a:hover::before {
    left: 0px;
}
.a:hover::after {
    left: 225px;/*丸も一緒に動かします*/
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.