Divider object
Original: http://jsfiddle.net/csswizardry/nb8tZ/
HTML
<div class="separator"> <span> Ich bin eine Headline </span>
</div>
<button class="btn color1" type="submit">kleiner Button</button>
<button class="btn color2 magic" type="submit">magic Button</button>
<div class="circle"> <a href=""> Ich bin ein Kreis!!</a>
</div>
<ol class="ui-list super-list">
<li><a href="#">Das ist super</a>
</li>
<li><a href="#">Das ist noch toller</a>
</li>
<li><a href="#">Das ist auch super</a>
</li>
<li><a href="#">Das ist nicht so super</a>
</li>
</ol>
CSS
.separator {
width:100%;
border-bottom: 1px solid grey;
text-align: center;
height: 18px;
margin-bottom: 15px;
}
.separator span {
line-height:15px;
padding 10px;
background: white;
display: inline-block;
margin-top: 10px;
color: light grey;
}
.btn {
border: none;
line-height: 1, 5;
font-size: 14px;
}
.color1 {
background-color: black;
color:white;
}
.color1:hover, .color1:focus {
background-color: grey;
}
.color2 {
background-color: #AF0A02;
color: white;
}
.color2:hover, .color2:focus {
background-color : orange;
color: black;
}
.magic {
font-size: 22px;
}
.circle {
width: 80px;
height: 80px;
border-radius:50%;
margin: auto;
background: #AF0A02;
}
.circle:hover {
background: black;
}
.circle a{
color:white;
padding :20%;
display: block;
text-decoration: none;
font size: 7px;
}
.super-list, .super-lst > li {
list-style:none;
border-color: #AF0A02;
background-color: #BE6F65;
margin-left:0;
padding-left: 0;
padding-left: 0;
}
ol {
border-top: 3px solid;
border-bottom:3px solid;
width:100%;
}
li {
border-bottom: 1px solid #AF0A02;
width: 100%;
}
li:last-child {
border-bottom: none;
}
.super-list a {
font-weight: bold;
color: black;
}
.super-link, .super-list-link:hover {
background-color:grey;
}
a {
text-decoration: none;
display:block;
}
li:hover, li:focus {
background:#D88163;
}
html {
padding: 20px;
}
body {
width: 80%;
padding: 40px;
margin: auto;
background: #fff;
box-shadow: 2px 2px 5px #AF0A02;
font-family: Calibri;
}
button {
margin-bottom: 10px;
}