پیشنمایش زنده
کد HTML
<button class="button">
<svg height="18" width="18" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
<path fill="#fff" d="M767.99994 585.142857q75.995429 0 129.462857 53.394286t53.394286 129.462857-53.394286 129.462857-129.462857 53.394286-129.462857-53.394286-53.394286-129.462857q0-6.875429 1.170286-19.456l-205.677714-102.838857q-52.589714 49.152-124.562286 49.152-75.995429 0-129.462857-53.394286t-53.394286-129.462857 53.394286-129.462857 129.462857-53.394286q71.972571 0 124.562286 49.152l205.677714-102.838857q-1.170286-12.580571-1.170286-19.456 0-75.995429 53.394286-129.462857t129.462857-53.394286 129.462857 53.394286 53.394286 129.462857-53.394286 129.462857-129.462857 53.394286q-71.972571 0-124.562286-49.152l-205.677714 102.838857q1.170286 12.580571 1.170286 19.456t-1.170286 19.456l205.677714 102.838857q52.589714-49.152 124.562286-49.152z"></path>
</svg>
<span class="share">SHARE </span>
</button>
کد CSS
.button {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(66, 13, 240);
width: 200px;
height: 50px;
border-radius: 10px;
font-size: 18px;
outline: 3px solid #270092;
cursor: pointer;
transition: ease-out .5s;
}
.button:hover {
width: 180px;
height: 60px;
outline-offset: 4px;
transform: scale(1.3) rotate(2deg);
background-color: blue;
box-shadow: 5px 20px #cdcbd4
}
.icon {
color: #270092;
margin-right: 5px;
}
.share {
margin-left: 5px;
color: #fff;
}