<a href="#0" class="o-btn o-btn--fill bg-white text-black-50 uppercase justify-around items-center py-7 px-14 hover:shadow-fill">
<i class="icon icon--ui-comment">
<svg>
<use class="no-barba" xlink:href="#ui-comment"></use>
</svg>
</i>
<span class="ml-2">Button</span>
</a>
{% import '@helpers' as h %}
<a href="{{ href|default('#0') }}" {{ attributes|default('') }} class="o-btn o-btn--fill bg-white text-black-50 uppercase justify-around items-center py-7 px-14 hover:shadow-fill">
{{ h.symbol('ui-comment') }}
<span class="ml-2">{{ text|default('See Comments')}}</span>
</a>
{
"siteTitle": "Asta Valentaite",
"copyright": "© 2017 Asta Valentaite. All rights reserved.",
"craft": {
"app": {
"config": {
"general": {
"custom": {
"objects": "/02-objects/",
"global": "../03-global/",
"components": "/04-components/",
"pages": "/05-pages/",
"macros": "/macros/",
"wrapper": "/wrapper/"
}
}
}
}
},
"sitemenu": [
{
"title": "About",
"slug": "/components/preview/about"
},
{
"title": "Fashion",
"slug": "/components/preview/press"
},
{
"title": "Beauty",
"slug": "/components/preview/post"
},
{
"title": "Lifestyle",
"slug": "/components/preview/vertical"
},
{
"title": "Collaborations",
"slug": "/components/preview/collaborations"
},
{
"title": "Press",
"slug": "/components/preview/press"
}
],
"text": "Button",
"href": "#0",
"attributes": null
}
.o-btn {
@apply .no-underline .inline-flex .leading-none .text-sm .relative .uppercase .tracking-wide;
& > span {
transition: transform 300ms ease;
}
}
.o-btn--sm {
min-width: rem(120px);
&:hover {
&::after {
transform: scale(1, 5);
transition-delay: 0ms;
}
& > span {
transform: translate3d(0, rem(-10px), 0);
transition-delay: 75ms;
}
}
&::after {
@apply .bg-blush .absolute .pin-l .pin-b .w-full .h-px;
transition: transform 300ms 75ms ease;
content: ' ';
}
}
.o-btn--share {
min-width: rem(150px);
&:focus {
outline: 0;
}
}
.o-btn--fill {
transition: box-shadow 300ms ease;
}
.o-btn--center {
@apply .text-blush .relative .py-4 .px-3 .justify-center;
}
There are no notes for this item.