پیشنمایش زنده
کد HTML
<button title="Add" class="cssbuttons-io-button">
<svg height="25" width="25" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z" fill="currentColor"></path></svg>
<span>Add</span>
</button>
کد CSS
.cssbuttons-io-button {
display: flex;
align-items: center;
justify-content: center;
gap: .2em;
font-family: inherit;
font-weight: 600;
font-size: 16px;
padding: .5em 1.5em;
color: white;
background: linear-gradient(0deg, rgb(0, 150, 60), rgb(100, 250, 150));
border: none;
outline: none;
border-bottom: 3px solid rgb(0, 130, 40);
box-shadow: 0 .5em .5em -.4em rgb(0, 0, 0, .5);
letter-spacing: 0.08em;
border-radius: 20em;
cursor: pointer;
transition: .5s;
}
.cssbuttons-io-button:hover {
filter: brightness(1.2);
color: rgb(0, 0, 0, .5);
}
.cssbuttons-io-button:active {
transition: 0s;
transform: rotate(-10deg);
}