Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <title>Stiltesting</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
    <link href='https://fonts.googleapis.com/css?family=Raleway:400,500,600,300' rel='stylesheet' type='text/css'>
</head>
<body>
    <a class="button button1" href="#">Knapp 1</a>
    <a class="button button2" href="#">Knapp 2</a>
    <a class="button button3" href="#">Knapp 3</a>
    <a class="button button4" href="#">Knapp 4</a>
    <img src="http://bloggfiler.no/frkfrontend.blogg.no/images/img_20180310_182824_fotor-2062398-3-1520766830443.jpg">
</body>
</html>
 
body
{
  background-color: white;
}
​
.button {
    padding: 10px 20px;
    border: 1px solid black;
    margin: 20px;
    display: inline-block;
    text-decoration: none;
    color: black;
    font-family: Raleway,sans-serif;
    transition: 0.5s;
}
​
.button1
{
    background-color: #6c757d;
    border: 1px solid #5a6268;
    color: #ffffff;
    border-radius: 2px;
}
​
.button2
{
    background-color: lightpink;
    border: 4px solid lightpink;
    border-radius: 20px;
}
​
.button3
{
    border: 2px solid #e88f8f;
    color: #e88f8f;
}
​
.button4
{
    background-color: #f8f8f8;
    border-radius: 3px;
    border: 1px solid #ccc;
    color: #444
}
​
.button1:hover
{
    background-color: #5a6268;
    box-shadow: 0px 0px 5px #5a6268;
}
​
.button2:hover
{
    border-color: #ffd5db;
    box-shadow: 0px 0px 8px lightpink;
}
​
.button3:hover
{
    background-color: #e88f8f;
    color: #ffffff;
}
​
.button4:hover
{
    background-color: #eee;
}
​
img
{
    width: 500px;
    display: block;
}
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers