Edit Unmask buttons interface design
1 .gg-edit-unmask,
2 .gg-edit-unmask::after { 3 display: block;
4 box-sizing: border-box;
5 border-radius: 22px 6 } 7 8 .gg-edit-unmask { 9 position: relative;
10 transform: scale(var(--ggs,1 ));
11 width: 20px ;
12 height: 20px ;
13 border: 2px solid transparent
14 } 15 16 .gg-edit-unmask::after { 17 content: "";
18 position: absolute;
19 width: 4px ;
20 height: 4px ;
21 background: currentColor;
22 top: 6px ;
23 left: 6px ;
24 box-shadow:
25 0 7px 0 1px ,
26 0 -7px 0 1px ,
27 -7px 0 0 1px ,
28 7px 0 0 1px 29 }
1 <svg 2 width="24 " 3 height="24 " 4 viewBox="0 0 24 24 " 5 fill="none" 6 xmlns="http://www.w3 .org/2000 /svg" 7 > 8 <path 9 d="M15 5 C15 6.65685 13.6569 8 12 8 C10.3431 8 9 6.65685 9 5 C9 3.34315 10.3431 2 12 2 C13.6569 2 15 3.34315 15 5 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M14 12 C14 13.1046 13.1046 14 12 14 C10.8954 14 10 13.1046 10 12 C10 10.8954 10.8954 10 12 10 C13.1046 10 14 10.8954 14 12 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M12 22 C13.6569 22 15 20.6569 15 19 C15 17.3431 13.6569 16 12 16 C10.3431 16 9 17.3431 9 19 C9 20.6569 10.3431 22 12 22 Z" 18 fill="currentColor" 19 /> 20 <path 21 d="M22 12 C22 13.6569 20.6569 15 19 15 C17.3431 15 16 13.6569 16 12 C16 10.3431 17.3431 9 19 9 C20.6569 9 22 10.3431 22 12 Z" 22 fill="currentColor" 23 /> 24 <path 25 d="M5 15 C6.65685 15 8 13.6569 8 12 C8 10.3431 6.65685 9 5 9 C3.34315 9 2 10.3431 2 12 C2 13.6569 3.34315 15 5 15 Z" 26 fill="currentColor" 27 /> 28 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledEditUnmask = styled.i` 5 &, 6 &::after { 7 display: block;8 box-sizing: border-box;9 border-radius: 22px ;10 } 11 & { 12 position: relative;13 transform: scale(var(--ggs, 1 ));14 width: 20px ;15 height: 20px ;16 border: 2px solid transparent;17 } 18 &::after { 19 content: '';20 position: absolute;21 width: 4px ;22 height: 4px ;23 background: currentColor;24 top: 6px ;25 left: 6px ;26 box-shadow: 0 7px 0 1px , 0 -7px 0 1px , -7px 0 0 1px , 7px 0 0 1px ;27 } 28 ` 29 30 export const EditUnmask = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 31 (props, ref) => { 32 return ( 33 <> 34 <StyledEditUnmask { ...props} ref={ ref} icon-role="edit-unmask" /> 35 </> 36 ) 37 } , 38 ) 39
Edit Unmask turned into an amazing pure CSS icon made by applying properties such as: .gg-edit-unmask, border-radius, transform, width, height, border, background, box-shadow,
