Add button styling

2020-02-09 00:42:25 -05:00
parent b2fe2ba202
commit fd8b82cf9f
8 changed files with 84 additions and 15 deletions
--- a/src/Components/Phone/Button/button.module.css
+++ b/src/Components/Phone/Button/button.module.css
@@ -0,0 +1,50 @@
+.button {
+	border-radius: 50%;
+	border: none;
+	width: 70px;
+	height: 70px;
+
+	margin: 15px;
+}
+.button:after {
+	display: block;
+
+}
+
+.connect {
+	composes: button;
+	background-color: #45bd57;
+}
+.connect:hover {
+	background-image: linear-gradient(#76b880, #5fb86c);
+}
+.connect:after {
+	content: url(/play-solid.svg);
+	transform: scale(0.4);
+	position: relative;
+    left: 2px;
+}
+
+.answer {
+	composes: button;
+	background-color: #45bd57;
+}
+.answer:hover {
+	background-image: linear-gradient(#84b68c, #5fb86c);
+}
+.answer:after {
+	content: url(/phone-solid.svg);
+	transform: scale(0.65);
+}
+
+.hangup, .reject {
+	composes: button;
+	background-color: #ff3b2f;
+}
+.hangup:hover, .reject:hover {
+	background-image: linear-gradient(#fd7f79, #fc564e);
+}
+.hangup:after, .reject:after {
+	content: url(/phone-solid.svg);
+	transform: rotate(224deg) scale(0.65);
+}