How to make a play button with pseudoclasses?

How to make a play button with pseudoclasses? Like '>' icon. For thumbnail of a video play

3 Replies

you can do it like this

@mixin makearrow($direction, $size, $color) {
  width: $size;
  @if ($direction == down) {
    background: conic-gradient(from -30deg at 50% 100%, $color 60deg, transparent 0);
    aspect-ratio:1.14/1;
  } @else if ($direction == up) {
    background: conic-gradient(from 150deg at 50% 0, $color 60deg, transparent 0);
    aspect-ratio:1.14/1;
  } @else if ($direction == left) {
    background: conic-gradient(from 60deg at 0% 50%, $color 60deg, transparent 0);
    aspect-ratio:1/1.14;
  } @else if ($direction == right) {
    background: conic-gradient(from -120deg at 100% 50%, $color 60deg, transparent 0);
    aspect-ratio:1/1.14;
  }
}

@mixin makearrow($direction, $size, $color) {
  width: $size;
  @if ($direction == down) {
    background: conic-gradient(from -30deg at 50% 100%, $color 60deg, transparent 0);
    aspect-ratio:1.14/1;
  } @else if ($direction == up) {
    background: conic-gradient(from 150deg at 50% 0, $color 60deg, transparent 0);
    aspect-ratio:1.14/1;
  } @else if ($direction == left) {
    background: conic-gradient(from 60deg at 0% 50%, $color 60deg, transparent 0);
    aspect-ratio:1/1.14;
  } @else if ($direction == right) {
    background: conic-gradient(from -120deg at 100% 50%, $color 60deg, transparent 0);
    aspect-ratio:1/1.14;
  }
}

or like this

@mixin makearrow($direction, $size, $color) {
  $calc:$size/2;
  width: 0;
  @if ($direction == down) {
    border-inline:$calc solid transparent;
    border-top:$size solid $color;
  } @else if ($direction == up) {
    border-inline:$calc solid transparent;
    border-bottom:$size solid $color;
  } @else if ($direction == left) {
    border-block:$calc solid transparent;
    border-right:$size solid $color;
  } @else if ($direction == right) {
    border-block:$calc solid transparent;
    border-left:$size solid $color;
  }
}

@mixin makearrow($direction, $size, $color) {
  $calc:$size/2;
  width: 0;
  @if ($direction == down) {
    border-inline:$calc solid transparent;
    border-top:$size solid $color;
  } @else if ($direction == up) {
    border-inline:$calc solid transparent;
    border-bottom:$size solid $color;
  } @else if ($direction == left) {
    border-block:$calc solid transparent;
    border-right:$size solid $color;
  } @else if ($direction == right) {
    border-block:$calc solid transparent;
    border-left:$size solid $color;
  }
}

and you can use it like this

.arrow {
  @include makearrow(right, 100px, white)
}

.arrow {
  @include makearrow(right, 100px, white)
}

And you can of course use this in a pseudo element too

Mert Efe•13mo ago

@tok124 thanks a lot is usually better to use library for that icon? above code is cool but seems a bit much for it

Tok124 (CSS Nerd)•13mo ago

you don't actually need this much code, the reason it's this much code is because i have made it so you can choose direction, but if you only want arrow to right, the the code could be reduced by a lot. But yeah, i would rather use font-awesome to make arrow

Gaming

Programming

How to make a play button with pseudoclasses?