Better button design on examples

soufatn · Oct 24, 2014 · fc609ae · fc609ae
1 parent 17ec0e3
commit fc609ae
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 18 deletions.
diff --git a/examples/css/styles.css b/examples/css/styles.css
@@ -2,29 +2,37 @@
 
 body {
     background: url(../img/background.jpg);
-    font: 1em Arial, sans-serif;
-    text-shadow: 0px -1px 2px #000;
 }
 
 a {
     color: inherit;
     text-decoration: none;
 }
 
-p {
-    margin: 40px 0;
-    text-align: center;
-    color: #fff;
-}
-
 .logo {
     display: block;
     margin: 20px auto;
     width: 400px;
 }
 
-.button {
+.button-try {
     display: block;
     margin: 20px auto;
     width: 200px;
 }
+
+.button-visit {
+    display: block;
+    margin: 50px auto;
+    width: 160px;
+    text-transform: uppercase;
+    padding: 20px;
+    border: 3px solid #fff;
+    border-radius: 10px;
+    text-align: center;
+    color: #fff;
+    font: 0.8em Arial, sans-serif;
+}
+    .button-visit:hover {
+        background: rgba(255, 255, 255, 0.1);
+    }
diff --git a/examples/picture.html b/examples/picture.html
@@ -28,18 +28,18 @@
 </head>
 <body>
     <a href="http://facedetection.jaysalvat.com">
-        <img src="img/logo.svg" class="logo">
+        <img class="logo" src="img/logo.svg">
     </a>
 
     <div class="picture-container">
-        <img src="assets/picture.jpg" class="picture" id="picture">
+        <img id="picture" class="picture" src="assets/picture.jpg">
     </div>
 
-    <a href="#" id="try-it">
-        <img src="img/tryit.svg" class="button">
+    <a id="try-it" href="#">
+        <img class="button-try" src="img/tryit.svg">
     </a>
 
-    <p><a href="http://facedetection.jaysalvat.com">Visit the website</a></p>
+    <a class="button-visit" href="http://facedetection.jaysalvat.com">Visit the website</a>
 
     <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
     <script src="../dist/jquery.facedetection.js"></script> 

diff --git a/examples/video.html b/examples/video.html
@@ -28,7 +28,7 @@
 </head>
 <body>
     <a href="http://facedetection.jaysalvat.com">
-        <img src="img/logo.svg" class="logo">
+        <img class="logo" src="img/logo.svg">
     </a>
 
     <div class="video-container">
@@ -39,11 +39,11 @@
         </video>
     </div>
 
-    <a href="#" id="try-it">
-        <img src="img/tryit.svg" class="button">
+    <a id="try-it" href="#">
+        <img class="button-try" src="img/tryit.svg">
     </a>
 
-    <p><a href="http://facedetection.jaysalvat.com">Visit the website</a></p>
+    <a class="button-visit" href="http://facedetection.jaysalvat.com">Visit the website</a>
 
     <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
     <script src="../dist/jquery.facedetection.js"></script>