Added button

abing-smurf · abing-smurf · commit f0acdeee8c6b · 2023-10-21T17:11:52.000+08:00
diff --git a/index.html b/index.html
@@ -19,7 +19,7 @@
 </head>
 
 <body>
-
+	
 	<!-- this is a comment. You will not see this on the web -->
 	<!-- div creates a wrapper for our layout -->
 	<!-- class is an attribute to name our div -->
@@ -31,7 +31,8 @@ <h1 class ="animate-charcter"> Full Stack Tambay</h1>
 		<p>I am Carlos a professional lazy person. </p>
 
 		<img src="images/cee.png" id="profile" >
-		<a href="mailto:cjalpay@gmail.com" class ="btn btn-success btn-lg mt-3" > Lets Work</a>
+		<br>
+		<a href="mailto:cjalpay@gmail.com"class="button-64" role="button"><span class="text">Lets Work!</span></a>
 		</section>
 
 	</div>
diff --git a/style.css b/style.css
@@ -14,6 +14,10 @@ h1, p {
 	font-family: "Montserrat", sans-serif;
 }
 
+p{
+	font-size: 19px;
+}
+
 #profile{
 	height: 190px ;
 	width: 200px;
@@ -26,6 +30,7 @@ body{
 	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 800'%3E%3Cg %3E%3Ccircle fill='%23000000' cx='400' cy='400' r='600'/%3E%3Ccircle fill='%23230046' cx='400' cy='400' r='500'/%3E%3Ccircle fill='%232f0052' cx='400' cy='400' r='400'/%3E%3Ccircle fill='%233b075e' cx='400' cy='400' r='300'/%3E%3Ccircle fill='%2348156a' cx='400' cy='400' r='200'/%3E%3Ccircle fill='%23552277' cx='400' cy='400' r='100'/%3E%3C/g%3E%3C/svg%3E");
  	background-attachment: fixed;
 	background-size: cover;
+
 }
 
 #landing{
@@ -67,4 +72,59 @@ body{
   to {
     background-position: 200% center;
   }
-}
+}
+
+a:visited{
+	text-decoration: none; 
+}
+
+
+.button-64 {
+  align-items: center;
+  background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
+  border: 0;
+  border-radius: 8px;
+  box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
+  box-sizing: border-box;
+  color: #FFFFFF;
+  display: flex;
+  font-family: Roboto, sans-serif;
+  font-size: 20px;
+  justify-content: center;
+  line-height: 1em;
+  max-width: 100%;
+  min-width: 140px;
+  padding: 3px;
+  text-decoration: none;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.button-64:active,
+.button-64:hover {
+  outline: 0;
+}
+
+.button-64 span {
+  background-color: rgb(5, 6, 45);
+  padding: 16px 24px;
+  border-radius: 6px;
+  width: 100%;
+  height: 100%;
+  transition: 300ms;
+}
+
+.button-64:hover span {
+  background: none;
+}
+
+@media (min-width: 768px) {
+  .button-64 {
+    font-size: 24px;
+    min-width: 196px;
+  }
+}
+
