Made donate button less aggressive

This commit is contained in:
Dan Leech 2015-11-11 21:47:37 +00:00
parent 467c5385cc
commit 9f937a0117
3 changed files with 30 additions and 66 deletions

View File

@ -74,37 +74,24 @@
padding: 0 0 1.5rem; padding: 0 0 1.5rem;
text-align: center; text-align: center;
} }
@keyframes pulse {
0% {
background-color: #CCC;
}
50% {
background-color: #AAA;
}
100% {
background-color: #CCC;
}
}
.donate-button { .donate-button {
-webkit-appearance: none; -webkit-appearance: none;
animation: pulse 2.5s infinite; background: transparent;
animation-timing-function: ease-in-out;
background: #CCC;
border: 0; border: 0;
border-radius: 1.5rem; color: #333;
color: #FFF;
cursor: pointer; cursor: pointer;
display: inline-block;
font-family: inherit; font-family: inherit;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 400; font-weight: 400;
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
margin: 1.5rem 0 0; margin: 0;
padding: 0.75rem 1.5rem; padding: 0;
text-decoration: underline;
text-transform: uppercase; text-transform: uppercase;
} }
.donate-button:focus, .donate-button:hover { .donate-button:focus, .donate-button:hover {
animation: none; color: #999;
background: #333;
} }
@media (min-width: 800px) { @media (min-width: 800px) {
.navbar { .navbar {
@ -117,10 +104,10 @@
} }
.navbar__text { .navbar__text {
display: inline-block; display: inline-block;
padding: 1.5rem 0.75rem; padding: 1.5rem 0;
} }
.donate-form { .donate-form {
margin: -0.5rem 1.5rem 0 0; margin: 0 1.5rem 0 0;
padding: 0; padding: 0;
} }
} }
@ -227,6 +214,7 @@
<header class="navbar" role="banner"> <header class="navbar" role="banner">
<h1 class="title">Simple Icons</h1> <h1 class="title">Simple Icons</h1>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" class="donate-form"> <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" class="donate-form">
<span class="navbar__text">Like this?</span>
<input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="UCMEG4SWEYFUC"> <input type="hidden" name="hosted_button_id" value="UCMEG4SWEYFUC">
<input type="submit" name="submit" value="Buy Dan a coffee!" class="donate-button"> <input type="submit" name="submit" value="Buy Dan a coffee!" class="donate-button">

View File

@ -74,37 +74,24 @@
padding: 0 0 1.5rem; padding: 0 0 1.5rem;
text-align: center; text-align: center;
} }
@keyframes pulse {
0% {
background-color: #CCC;
}
50% {
background-color: #AAA;
}
100% {
background-color: #CCC;
}
}
.donate-button { .donate-button {
-webkit-appearance: none; -webkit-appearance: none;
animation: pulse 2.5s infinite; background: transparent;
animation-timing-function: ease-in-out;
background: #CCC;
border: 0; border: 0;
border-radius: 1.5rem; color: #333;
color: #FFF;
cursor: pointer; cursor: pointer;
display: inline-block;
font-family: inherit; font-family: inherit;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 400; font-weight: 400;
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
margin: 1.5rem 0 0; margin: 0;
padding: 0.75rem 1.5rem; padding: 0;
text-decoration: underline;
text-transform: uppercase; text-transform: uppercase;
} }
.donate-button:focus, .donate-button:hover { .donate-button:focus, .donate-button:hover {
animation: none; color: #999;
background: #333;
} }
@media (min-width: 800px) { @media (min-width: 800px) {
.navbar { .navbar {
@ -117,10 +104,10 @@
} }
.navbar__text { .navbar__text {
display: inline-block; display: inline-block;
padding: 1.5rem 0.75rem; padding: 1.5rem 0;
} }
.donate-form { .donate-form {
margin: -0.5rem 1.5rem 0 0; margin: 0 1.5rem 0 0;
padding: 0; padding: 0;
} }
} }
@ -227,6 +214,7 @@
<header class="navbar" role="banner"> <header class="navbar" role="banner">
<h1 class="title">Simple Icons</h1> <h1 class="title">Simple Icons</h1>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" class="donate-form"> <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" class="donate-form">
<span class="navbar__text">Like this?</span>
<input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="UCMEG4SWEYFUC"> <input type="hidden" name="hosted_button_id" value="UCMEG4SWEYFUC">
<input type="submit" name="submit" value="Buy Dan a coffee!" class="donate-button"> <input type="submit" name="submit" value="Buy Dan a coffee!" class="donate-button">

View File

@ -74,37 +74,24 @@
padding: 0 0 1.5rem; padding: 0 0 1.5rem;
text-align: center; text-align: center;
} }
@keyframes pulse {
0% {
background-color: #CCC;
}
50% {
background-color: #AAA;
}
100% {
background-color: #CCC;
}
}
.donate-button { .donate-button {
-webkit-appearance: none; -webkit-appearance: none;
animation: pulse 2.5s infinite; background: transparent;
animation-timing-function: ease-in-out;
background: #CCC;
border: 0; border: 0;
border-radius: 1.5rem; color: #333;
color: #FFF;
cursor: pointer; cursor: pointer;
display: inline-block;
font-family: inherit; font-family: inherit;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 400; font-weight: 400;
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
margin: 1.5rem 0 0; margin: 0;
padding: 0.75rem 1.5rem; padding: 0;
text-decoration: underline;
text-transform: uppercase; text-transform: uppercase;
} }
.donate-button:focus, .donate-button:hover { .donate-button:focus, .donate-button:hover {
animation: none; color: #999;
background: #333;
} }
@media (min-width: 800px) { @media (min-width: 800px) {
.navbar { .navbar {
@ -117,10 +104,10 @@
} }
.navbar__text { .navbar__text {
display: inline-block; display: inline-block;
padding: 1.5rem 0.75rem; padding: 1.5rem 0;
} }
.donate-form { .donate-form {
margin: -0.5rem 1.5rem 0 0; margin: 0 1.5rem 0 0;
padding: 0; padding: 0;
} }
} }
@ -227,6 +214,7 @@
<header class="navbar" role="banner"> <header class="navbar" role="banner">
<h1 class="title">Simple Icons</h1> <h1 class="title">Simple Icons</h1>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" class="donate-form"> <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" class="donate-form">
<span class="navbar__text">Like this?</span>
<input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="UCMEG4SWEYFUC"> <input type="hidden" name="hosted_button_id" value="UCMEG4SWEYFUC">
<input type="submit" name="submit" value="Buy Dan a coffee!" class="donate-button"> <input type="submit" name="submit" value="Buy Dan a coffee!" class="donate-button">