.ui-button
{
	position: relative;
	display: block;
    padding: 15px 30px;
    font-size: 14px;
    font-weight: 700;
    color: #c22028;
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.25);
    background: linear-gradient(to right, #c22028 50%, #fefbfb 50%);
    background-size: 202% 100%;
    background-position: 99% 0%;
	border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
}

.ui-button.light
{
    background: linear-gradient(to right, #e19094 50%, #fff 50%);
    background-size: 202% 100%;
    background-position: 99% 0%;
}

	.ui-button.rollon:before
	{
		position: absolute;
		content: '';
		width: 20px;
		height: 100%;
		padding: 5px 0px;
		top: -5px;
		left: 0px;
		margin-left: -10px;
		background: url('/img_files/items/btn-icon.svg') no-repeat center;
		background-size: 100% 100%;
		transition: 0.3s;
		-o-transition: 0.3s;
		-webkit-transition: 0.3s;
	}

.ui-button:hover
{
    color: #fff;
    background-position: 0% 0%;
}

	.ui-button.rollon:hover:before
	{
		left: 100%;
	}

.ui-button:active
{
    background: linear-gradient(to right, #a91920 50%, #fefbfb 50%);
    background-size: 202% 100%;
    background-position: 0% 0%;
}

.ui-button.light:active
{
    background: linear-gradient(to right, #e19ea1 50%, #fff 50%);
    background-size: 202% 100%;
    background-position: 0% 0%;
}