Asta Valentaite

Button: Center 

<a href="#0" class="o-btn o-btn--sm o-btn--center"><span class="block">Button</span></a>
 
<a href="{{ href|default('#0') }}" {{ attributes|default('') }} class="o-btn o-btn--sm o-btn--center"><span class="block">{{ text|default('Button')}}</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
}
  • Content: 
    .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;
}
  • URL: /components/raw/button/_button.scss
  • Filesystem Path: src/templates/02-objects/button/_button.scss
  • Size: 710 Bytes

There are no notes for this item.