271 views
CSSAdd prefixes
1.Message { 2 width: 310px; 3 height: 40px; 4 border-radius: 10px; 5 background-color: #40414f; 6 transform: translate(0px,0px); 7 box-shadow: 5px 5px #34343f; 8} 9 10.MsgInput { 11 font-size: 18px; 12 border-radius: 5px; 13 background-color: #40414f; 14 border: none; 15 outline: none; 16 width: 250px; 17 height: 30px; 18 transform: translate(5px,-3px); 19 color: white; 20 padding: 10px; 21 font-weight: bold; 22} 23 24.SendSVG { 25 width: 30px; 26 height: 30px; 27 border-width: 50px; 28 transform: translate(20px,5px); 29 background-size: 10px; 30 border-radius: 10px; 31 transition: 0.3s; 32} 33 34.SendSVG:hover { 35 background-color: #2b2b35; 36} 37 38.l { 39 position: absolute; 40 width: 1%; 41 height: 30px; 42 background-color: #2e2f38; 43 transform: translate(-20px,5px); 44} 45
HTML
1<div class="Message"> 2 <input title="Write Message" tabindex="i" pattern="\d+" placeholder="Message.." class="MsgInput" type="text"> 3 <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="30.000000pt" height="30.000000pt" viewBox="0 0 30.000000 30.000000" preserveAspectRatio="xMidYMid meet" class="SendSVG"> 4 <g transform="translate(0.000000,30.000000) scale(0.100000,-0.100000)" fill="#ffffff70" stroke="none"> 5 <path d="M44 256 c-3 -8 -4 -29 -2 -48 3 -31 5 -33 56 -42 28 -5 52 -13 52 -16 0 -3 -24 -11 -52 -16 -52 -9 -53 -9 -56 -48 -2 -21 1 -43 6 -48 10 -10 232 97 232 112 0 7 -211 120 -224 120 -4 0 -9 -6 -12 -14z"></path> 6 </g> 7</svg><span class="l"></span> 8 9</div>