mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
87 lines
3.8 KiB
HTML
87 lines
3.8 KiB
HTML
<button>
|
|
<div class="icon">
|
|
<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>
|
|
</div>
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by MuhammadHasann - Tags: button */
|
|
button {
|
|
position: relative;
|
|
padding: 13px 35px;
|
|
background: transparent;
|
|
font-size: 17px;
|
|
font-weight: 900;
|
|
border: none;
|
|
transition: all .3s ease-in-out;
|
|
}
|
|
|
|
button::after {
|
|
content: "Read More";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 155px;
|
|
height: 47px;
|
|
background-color: #ffffff;
|
|
font-size: 17px;
|
|
font-weight: 900;
|
|
line-height: 47px;
|
|
color: #181818;
|
|
border: 2px solid #181818;
|
|
border-radius: 50px;
|
|
transition: all .3s ease-in-out;
|
|
z-index: 2;
|
|
}
|
|
|
|
button:hover::after {
|
|
width: 165px;
|
|
height: 50px;
|
|
font-size: 18px;
|
|
line-height: 50px;
|
|
}
|
|
|
|
button:focus::after {
|
|
content: "Read less";
|
|
top: 200%;
|
|
width: 155px;
|
|
height: 47px;
|
|
font-size: 17px;
|
|
line-height: 47px;
|
|
z-index: -2;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.icon {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
width: 20px;
|
|
height: auto;
|
|
z-index: -3;
|
|
transition: all .3s ease-in-out;
|
|
}
|
|
|
|
button:focus .icon {
|
|
top: -250%;
|
|
width: 75px;
|
|
height: auto;
|
|
}
|
|
|
|
.fil0 {
|
|
fill: #333333
|
|
}
|
|
|
|
.fil2 {
|
|
fill: #222222
|
|
}
|
|
|
|
.fil1 {
|
|
fill: #181818
|
|
}
|
|
|
|
.fil3 {
|
|
fill: #181818
|
|
}
|
|
</style>
|