Button With Gradient Border In GTK3

custom.css

/* Button defect styles reset */
button {
	box-shadow: none;
	text-shadow: none;
	border: none;
	outline: none;
}

/* The box will simulate the border */
box {
	padding: 2px;
	background-color: #F24225;
	background-image: linear-gradient(to right, #F24225, #BC2960);
	border-radius: 50%;
}

/* Enlarge the padding of the button to complete the effect */
box button {
	background: white;
	padding: 15px;
	border-radius: 50%;
}

sample-button.xml

<child>
	<object class="GtkBox">
		<property name="visible">True</property>
		<property name="can_focus">False</property>
		<property name="margin_left">10</property>
		<property name="margin_right">10</property>
		<property name="margin_top">10</property>
		<property name="margin_bottom">10</property>
		<property name="orientation">vertical</property>
		<property name="homogeneous">True</property>
		<child>
			<object class="GtkButton">
				<property name="visible">True</property>
				<property name="can_focus">True</property>
				<property name="receives_default">True</property>
				<child>
					<object class="GtkImage">
						<property name="visible">True</property>
						<property name="can_focus">False</property>
						<property name="icon_name">go-home-symbolic</property>
						<property name="icon_size">6</property>
					</object>
				</child>
			</object>
			<packing>
				<property name="expand">False</property>
				<property name="fill">True</property>
				<property name="position">0</property>
			</packing>
		</child>
	</object>
</child>

Interesting hack

pls add login/register system (all in one gist pls)

pls add login/register system (all in one gist pls)

Are you talking about a registration form ?