使用css3和html创建此形状

Question

这是演示图像如何在css3中创建此按钮。 请帮助我。

Answer 1

有趣的运动，这样的事情？

＆＃13;

＆＃13;

div {
    height: 40px;
    width: 20px;
    border-radius: 8px;
    background: rgb(231,76,60);
    position: relative;
}
div:before {
    content: '';
    height: 16px;
    width: 8px;
    border-radius: 3px;
    background: rgb(221,221,221);
    display: block;
    position: absolute;
    top: 6px;
    left: 6px;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

body{
    background: #DDDDDD;
}
div#oval{
    background: #E74C3C;
    height: 40px;
    width: 20px;
    border-radius: 8px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50%
    transform: translate(-50%, -50%);
}
div#window{
    background: #DDDDDD;
    height: 16px;
    width: 7px;
    border-radius: 3px;
    margin: 7px;
}

<div id="oval">
    <div id="window"></div>
</div>

Answer 3

＆＃13;

＆＃13;

#red {
  position: relative;
  height: 50px;
  width: 30px;
  background: red;
  border-radius: 20px;
}
#gray {
  height: 20px;
  width: 10px;
  background: gray;
  margin: 0 auto;
  position: absolute;
  top: 8px;
  left: 10px;
  border-radius: 10px;
  }

＆＃13;

<div id="red">
  <div id="gray"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

    body{
      background-color:black;
    }
    .eye-wrap {
    		position: absolute;
    		top: -5em;
    		left: 0;
    		bottom: 0;
    		right: 0;
    		margin: auto;
    		overflow: hidden;
    		width: 110px;
    		height: 110px;
    	}
    .eye {
    		position: absolute;
    		top: 0;
    		left: 0;
    		bottom: 0;
    		right: 0;
    		margin: auto;
    		height: 110px;
    		width: 80px;
    		border-radius: 50%;
    		background-color: red;
    		overflow: hidden;
    	}
    .in-eye {
    		position: absolute;
    		height: 55px;
    		width: 45px;
    		left: 15px;
    		bottom: 0;
    		top: -35px;
    		right: 0;
    		margin: auto;
    		background-color: #fff;
    		border-radius: 50%;
    	}

    <div class="eye-wrap left-eye">
      <div class="eye">
    		<div class="in-eye"></div>
    	</div>
    </div>

仅使用CSS3。请查看此pen。

Answer 5

这是一个关于如何创建类似于您发布图像的按钮的简单示例。我在按钮上添加了一个简单的动画效果，但如果它不是你想要的，你可以随时删除它。

＆＃13;

＆＃13;

/*CSS Code*/

#button {
  width: 30px;
  height: 50px;
  background-color: #F76B4F;
  border-radius: 14px;
  
  margin: 0 auto;
  
  /*The transition effect that smooths the animations*/
  -webkit-transition: 0.4s ease;
}

/*When the mouse is hovering over the button*/
#button:hover {
  background-color: #C95B44;
  cursor: pointer;
}

/*When the button is being pressed*/
#button:active {
  background-color: #A33C27;
  height: 38px;
}

#push {
  height: 8px;
  width: 0px;
}

#center {
  width: 15px;
  height: 20px;
  background-color: white;
  border-radius: 8px;
  
  margin: 0 auto;
}

＆＃13;

<!-- HTML Code -->

<div id="button">
  <div id="push"></div>
  <div id="center"></div>
</div>

＆＃13;

＆＃13;

＆＃13;