Improve button styling

This commit is contained in:
Yarmo Mackenbach 2020-06-25 20:28:32 +02:00
parent b39d6c953e
commit 458b72f377
4 changed files with 21 additions and 20 deletions

View file

@ -31,7 +31,7 @@
<h3>Result</h3> <h3>Result</h3>
<textarea name="messageEncrypted" id="messageEncrypted" readonly></textarea> <textarea name="messageEncrypted" id="messageEncrypted" readonly></textarea>
<p id="result"></p> <p id="result"></p>
<input type="submit" name="submit" value="ENCRYPT MESSAGE"> <input type="submit" class="bigBtn" name="submit" value="ENCRYPT MESSAGE">
</form> </form>
</div> </div>

View file

@ -22,11 +22,10 @@
<h1>Keyoxide</h1> <h1>Keyoxide</h1>
<div class="content"> <div class="content">
<p>Because SO2 + 2NaOH → Na2SO3 + H2O</p> <p>Because SO2 + 2NaOH → Na2SO3 + H2O</p>
<h2>Basic PGP operations</h2> <h2>PGP functions</h2>
<p> <p>
<a href="/verify">verify</a> <a class="bigBtn" href="/verify">verify</a>
<br> <a class="bigBtn" href="/encrypt">encrypt</a>
<a href="/encrypt">encrypt</a>
</p> </p>
<h2>About</h2> <h2>About</h2>
<p><a href="/">Keyoxide</a> is a lightweight and FOSS solution to make basic cryptography operations accessible to regular humans.</p> <p><a href="/">Keyoxide</a> is a lightweight and FOSS solution to make basic cryptography operations accessible to regular humans.</p>

View file

@ -33,6 +33,22 @@ footer {
.spacer { .spacer {
flex: 1; flex: 1;
} }
.bigBtn {
color: #333;
width: 100%;
padding: 8px;
font-size: 1.2em;
text-transform: uppercase;
text-decoration: none;
background-color: #c3eaff;
border: 1px solid #3f9acc;
border-radius: 3px;
border-bottom-width: 3px;
cursor: pointer;
}
.bigBtn:hover {
background-color: #9dd3f0;
}
h1 { h1 {
margin: 0; margin: 0;
@ -54,20 +70,6 @@ textarea {
input[type="radio"] { input[type="radio"] {
vertical-align: sub; vertical-align: sub;
} }
input[type="submit"] {
width: 100%;
padding: 8px;
font-size: 1.2em;
text-transform: uppercase;
background-color: #c3eaff;
border: 1px solid #3f9acc;
border-radius: 3px;
border-bottom-width: 3px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #9dd3f0;
}
.green { .green {
color: green; color: green;
} }

View file

@ -31,7 +31,7 @@
<h3>Result</h3> <h3>Result</h3>
<p id="result">Click on the button below.</p> <p id="result">Click on the button below.</p>
<p id="resultContent"></p> <p id="resultContent"></p>
<input type="submit" name="submit" value="VERIFY SIGNATURE" value=""> <input type="submit" class="bigBtn" name="submit" value="VERIFY SIGNATURE" value="">
</form> </form>
</div> </div>