<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MaHiiii</title>
<style type="text/css">
a {
font-family: helvetica;
background: #E20025 url(jT5el.png) center no-repeat;
border-radius: 50%;
width: 50px;
display: block;
white-space: nowrap;
padding: 1em 0 1em 0;
text-indent: -3em;
word-spacing: 4em;
text-decoration: none;
margin: 0 auto;
position: relative;
color: #E20025;
box-shadow: 0 0 5px;
}
a:before, a:after {
content: '';
height: 1px;
background: #CCC;
width: 7em;
display: block;
position: absolute;
height: 2px;
top: 1.5em;
}
a:before {
left: -11em;
}
a:after {
right: -11em;
}
@media only screen and (min-width:515px){
a:before,a:after {
width: 9em;
}
a:before {
left: -13em;
}
a:after {
right: -13em;
}
}
@media only screen and (min-width:570px){
a:before,a:after {
width: 10em;
}
a:before {
left: -14em;
}
a:after {
right: -14em;
}
}
@media only screen and (min-width:620px){
a:before,a:after {
width: 12em;
}
a:before {
left: -16em;
}
a:after {
right: -16em;
}
}
@media only screen and (min-width:800px){
a:before,a:after {
width: 17em;
}
a:before {
left: -21em;
}
a:after {
right: -21em;
}
}
</style>
</head>
<body>
<a href="#">Read More</a>
</body>
</html>
Output :)
<html>
<head>
<meta charset="utf-8">
<title>MaHiiii</title>
<style type="text/css">
a {
font-family: helvetica;
background: #E20025 url(jT5el.png) center no-repeat;
border-radius: 50%;
width: 50px;
display: block;
white-space: nowrap;
padding: 1em 0 1em 0;
text-indent: -3em;
word-spacing: 4em;
text-decoration: none;
margin: 0 auto;
position: relative;
color: #E20025;
box-shadow: 0 0 5px;
}
a:before, a:after {
content: '';
height: 1px;
background: #CCC;
width: 7em;
display: block;
position: absolute;
height: 2px;
top: 1.5em;
}
a:before {
left: -11em;
}
a:after {
right: -11em;
}
@media only screen and (min-width:515px){
a:before,a:after {
width: 9em;
}
a:before {
left: -13em;
}
a:after {
right: -13em;
}
}
@media only screen and (min-width:570px){
a:before,a:after {
width: 10em;
}
a:before {
left: -14em;
}
a:after {
right: -14em;
}
}
@media only screen and (min-width:620px){
a:before,a:after {
width: 12em;
}
a:before {
left: -16em;
}
a:after {
right: -16em;
}
}
@media only screen and (min-width:800px){
a:before,a:after {
width: 17em;
}
a:before {
left: -21em;
}
a:after {
right: -21em;
}
}
</style>
</head>
<body>
<a href="#">Read More</a>
</body>
</html>
Output :)
No comments:
Post a Comment