A set of heading buttons with some relief with shadow 3d effect
A Pen by Antonio Garcia on CodePen.
.content | |
.holder | |
each title in ['One', 'Two', 'Three', 'Four'] | |
.button | |
.box | |
.wrap | |
h2= title | |
.description | |
h3 HEADING | |
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu augue dictum, tempor lacus id, gravida purus. |
@import url('https://fonts.googleapis.com/css?family=Economica&display=swap') | |
html, body | |
margin: 0 | |
padding: 0 | |
body | |
position: relative | |
width: 100% | |
font-family: Economica | |
background-color: #ddd | |
.content | |
display: block | |
margin: auto | |
width: 80% | |
background-color: #ddd | |
.holder | |
padding-top: 50px | |
$r: 50px | |
$p: 20px | |
$h: 100px | |
$b: 20px | |
.button | |
position: relative | |
width: 80% | |
height: $h | |
margin: 0 auto | |
padding: 0px | |
text-align: left | |
padding-left: $p | |
z-index: 2 | |
.wrap | |
position: absolute | |
left: 0 | |
top: 0 | |
width: 100% | |
height: 100% | |
border-radius: $r 0 0 $r | |
background-image: linear-gradient(to left, #ddd 40%, #fff 60%) | |
z-index: 9 | |
.box | |
position: absolute | |
left: 40px | |
top: 0 | |
right: 40% | |
bottom: 0 | |
z-index: -1 | |
opacity: .5 | |
filter: blur(8px) | |
&::before | |
position: absolute | |
left: 0 | |
top: 90% | |
width: 100% | |
height: 80% | |
content: '' | |
background-image: linear-gradient(to right, rgba(#000,0) 0%,rgba(#000,.76) 60%, rgba(#000,1) 100%) | |
clip-path: polygon(100% 0, 0% 100%, 0 0) | |
box-shadow: 0 0 10px rgba(#000,1) | |
h2 | |
position: absolute | |
display: block | |
left: $b/2 | |
top: $b/2 | |
width: $h - $b | |
height: $h - $b | |
background-color: red | |
margin: 0 | |
padding: 0 | |
line-height: $h - $b | |
text-align: center | |
border-radius: $h/2 | |
box-shadow: inset 7px 7px 10px rgba(#000,.5) | |
&:nth-child(2n) | |
.wrap | |
border-radius: 0 $r $r 0 | |
background-image: linear-gradient(to right, #ddd 40%, #fff 60%) | |
h2 | |
left: auto | |
right: $b/2 | |
box-shadow: inset -7px 7px 10px rgba(#000,.5) | |
.box | |
left: 40% | |
right: 0 | |
bottom: 0 | |
transform: scaleX(-1) | |
.button:nth-child(1) | |
z-index: 4 | |
h2 | |
background-color: blue | |
color: #FFF | |
.button:nth-child(2) | |
z-index: 3 | |
h2 | |
background-color: red | |
color: #FFF | |
.button:nth-child(3) | |
z-index: 2 | |
h2 | |
background-color: green | |
color: #FFF | |
.button:nth-child(4) | |
z-index: 1 | |
h2 | |
background-color: orange | |
color: #FFF | |
.button | |
.description | |
position: absolute | |
padding-top: 12px | |
width: 50% | |
z-index: 10 | |
left: 50% | |
text-align: left | |
transform: translateX(-50%) | |
h3 | |
margin: 0 | |
padding: 0 | |
letter-spacing: 0.15em | |
p | |
margin: 8px 0 0 0 | |
padding: 0 | |
&:nth-child(2n) | |
.description | |
text-align: right |