Skip to content

Instantly share code, notes, and snippets.

@CyberSliver
Created September 19, 2012 12:41
Show Gist options
  • Save CyberSliver/3749433 to your computer and use it in GitHub Desktop.
Save CyberSliver/3749433 to your computer and use it in GitHub Desktop.
Försäkringskassan - Style 2.0
/**
* Försäkringskassan - Style 2.0
*/
body {
background: #FFFFFF;
font-family: "Trebuchet MS";
}
button {
padding: 0.2em 1em 0.2em 1em;
border-radius: 0.2em;
font-weight: bold;
border: 0.1em solid #808080;
font-size: 1em;
margin: 0.5em;
box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.4);
}
button.primary {
color: #FFFFFF;
text-shadow: 0.1em 0 0 rgba(0,0,0,0.37);
border-color: #2886B1 #2886B1 #015188 #2886B1;
background-color: #0061A7;
background-image: -webkit-linear-gradient(#3295D5, #0061A7);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3295D5), color-stop(100%, #0061A7)); /* Safari 4+, Chrome 2+ */
background-image: -webkit-linear-gradient(#3295D5, #0061A7); /* Safari 5.1+, Chrome 10+ */
background-image: -moz-linear-gradient(#3295D5, #0061A7); /* FF3.6+ */
background-image: -o-linear-gradient(#3295D5, #0061A7); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3295D5', endColorstr='#0061A7'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3295D5', endColorstr='#0061A7')"; /* IE8+ */
background-image: linear-gradient(#3295D5, #0061A7); /* CSS 3 */
}
button.secondary {
color: #1C7BBB;
text-shadow: 0.1em 0 0 rgba(255, 255, 255, 0.67);
border-color: rgba(0,0,0,0.2);
background-color: #FFFFFF;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFFFFF), color-stop(100%, #333333)); /* Safari 4+, Chrome 2+ */
background-image: -webkit-linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.1)); /* Safari 5.1+, Chrome 10+ */
background-image: -moz-linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.1)); /* FF3.6+ */
background-image: -o-linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.1)); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */
background-image: linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.1)); /* CSS 3 */
}
button.entry {
padding: 1em 2em;
width: 20em;
}
<!-- content to be placed inside <body>…</body> -->
<form>
<button name="Spara" type="submit" value="spara" class="primary">Spara</button><br>
<code>Class: primary</code><br>
<br>
<button name="Avsluta" type="Submit" value="avsluta" class="secondary">Avsluta</button><br>
<code>Class: secondary</code><br>
<br>
<button name="BankID" type="Submit" value="bankid" class="primary entry">Mobilt Bank ID</button><br>
<code>Class: primary, entry</code><br>
<br>
</form>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment