155 views
CSS
1button { 2 position: relative; 3 padding: 13px 35px; 4 background: transparent; 5 font-size: 17px; 6 font-weight: 900; 7 border: none; 8 transition: all .3s ease-in-out; 9} 10 11button::after { 12 content: "Read More"; 13 position: absolute; 14 top: 50%; 15 left: 50%; 16 transform: translate(-50%, -50%); 17 width: 155px; 18 height: 47px; 19 background-color: #ffffff; 20 font-size: 17px; 21 font-weight: 900; 22 line-height: 47px; 23 color: #181818; 24 border: 2px solid #181818; 25 border-radius: 50px; 26 transition: all .3s ease-in-out; 27 z-index: 2; 28} 29 30button:hover::after { 31 width: 165px; 32 height: 50px; 33 font-size: 18px; 34 line-height: 50px; 35} 36 37button:focus::after { 38 content: "Read less"; 39 top: 200%; 40 width: 155px; 41 height: 47px; 42 font-size: 17px; 43 line-height: 47px; 44 z-index: -2; 45 pointer-events: none; 46} 47 48.icon { 49 position: absolute; 50 top: 0; 51 left: 50%; 52 transform: translate(-50%, 0); 53 width: 20px; 54 height: auto; 55 z-index: -3; 56 transition: all .3s ease-in-out; 57} 58 59button:focus .icon { 60 top: -250%; 61 width: 75px; 62 height: auto; 63} 64 65.fil0 { 66 fill: #333333 67} 68 69.fil2 { 70 fill: #222222 71} 72 73.fil1 { 74 fill: #181818 75} 76 77.fil3 { 78 fill: #181818 79}
HTML
1<button> 2 <div class="icon"> 3 <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 19.18 20.17" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><g id="_2478177736128"><path class="fil0" d="M9.59 20.17c-2.99,-1.91 -4.97,-2.73 -7.95,-3.34 -0.44,-3.75 -0.99,-6.77 -1.64,-8.96 4.01,0.22 7.06,0.94 9.59,3.14 0,4.34 0,4.81 0,9.16z"></path><path class="fil1" d="M9.59 20.17c2.99,-1.91 4.97,-2.73 7.95,-3.34 0.44,-3.75 0.99,-6.77 1.64,-8.96 -4.01,0.22 -7.06,0.94 -9.59,3.14 0,4.34 0,4.81 0,9.16z"></path><path class="fil2" d="M9.66 10.55c0,0 2.92,-3.03 8.68,-3.05 0,0 0.01,-0.55 0.29,-1 0,0 -6.73,0.43 -8.97,4.05zm-0.13 0c0,0 -2.92,-3.03 -8.68,-3.05 0,0 -0.01,-0.55 -0.29,-1 0,0 6.73,0.43 8.97,4.05z"></path><path class="fil0" d="M9.33 0.92l0.88 0.15 0.42 -0.8 0.12 0.89 0.88 0.15 -0.81 0.4 0.12 0.89 -0.62 -0.65 -0.81 0.4 0.42 -0.8 -0.62 -0.64zm2.06 3.05c0.1,0 0.18,0.08 0.18,0.18 0,0.1 -0.08,0.18 -0.18,0.18 -0.1,0 -0.18,-0.08 -0.18,-0.18 0,-0.1 0.08,-0.18 0.18,-0.18zm-7.43 -0.4c0.12,0 0.22,0.05 0.3,0.12 0.08,0.08 0.12,0.18 0.12,0.3 0,0.12 -0.05,0.22 -0.12,0.3 -0.08,0.08 -0.18,0.12 -0.3,0.12 -0.12,0 -0.22,-0.05 -0.3,-0.12 -0.08,-0.08 -0.12,-0.18 -0.12,-0.3 0,-0.12 0.05,-0.22 0.12,-0.3 0.08,-0.08 0.18,-0.12 0.3,-0.12zm0.25 0.18c-0.06,-0.06 -0.15,-0.1 -0.25,-0.1 -0.1,0 -0.18,0.04 -0.25,0.1 -0.06,0.06 -0.1,0.15 -0.1,0.25 0,0.1 0.04,0.18 0.1,0.25 0.06,0.06 0.15,0.1 0.25,0.1 0.1,0 0.18,-0.04 0.25,-0.1 0.06,-0.06 0.1,-0.15 0.1,-0.25 0,-0.1 -0.04,-0.18 -0.1,-0.25zm3.36 -0.16c0.23,0 0.43,0.09 0.58,0.24 0.15,0.15 0.24,0.35 0.24,0.58 0,0.23 -0.09,0.43 -0.24,0.58 -0.15,0.15 -0.35,0.24 -0.58,0.24 -0.23,0 -0.43,-0.09 -0.58,-0.24 -0.15,-0.15 -0.24,-0.35 -0.24,-0.58 0,-0.23 0.09,-0.43 0.24,-0.58 0.15,-0.15 0.35,-0.24 0.58,-0.24zm0.47 0.35c-0.12,-0.12 -0.29,-0.2 -0.47,-0.2 -0.18,0 -0.35,0.07 -0.47,0.2 -0.12,0.12 -0.2,0.29 -0.2,0.47 0,0.18 0.07,0.35 0.2,0.47 0.12,0.12 0.29,0.2 0.47,0.2 0.18,0 0.35,-0.07 0.47,-0.2 0.12,-0.12 0.2,-0.29 0.2,-0.47 0,-0.18 -0.07,-0.35 -0.2,-0.47z"></path><path class="fil3" d="M6.75 1.49c0.18,0 0.33,0.15 0.33,0.33 0,0.18 -0.15,0.33 -0.33,0.33 -0.18,0 -0.33,-0.15 -0.33,-0.33 0,-0.18 0.15,-0.33 0.33,-0.33zm2.37 4.79l0.45 0.52 0.64 -0.27 -0.37 0.58 0.45 0.52 -0.67 -0.16 -0.36 0.59 -0.05 -0.68 -0.67 -0.16 0.64 -0.26 -0.05 -0.68zm6.92 -5.91l0.9 0.38 0.64 -0.75 -0.09 0.98 0.9 0.37 -0.95 0.23 -0.09 0.98 -0.5 -0.84 -0.95 0.23 0.65 -0.74 -0.5 -0.83z"></path></g></g></svg> 4 </div> 5</button>