Style Click to Call HTML

[boston85719]

Hi @J805 I saw your past post on the click to call html

Generate an email or make a phone call

You can do it with HTML <a href="tel:555-555-5555">555-555-5555</a> Or with an image: <a href="tel:555-555-5555"><img src="path/to/phone/icon.jpg" /></a> And for an email: <a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">Send Mail</a>

and I am curious if you know how to style the html element so the phone number appearance would match the other text elements I would have on page…such as font type, font size and font color

Cheers

[J805]

You should be able to do some things with html, for examples you can check here: https://www.w3schools.com/html/default.asp

For the color, for example, you would do something like this:

<p style="color:#00ff00;">Add your text here</p>

I hope that is helpful.

[boston85719]

@J805

Add your text here

Very helpful thank you…I got it to change color, will spend some time tomorrow trying to get some more customization to it.

I always look at w3schools.com but I never know how to apply it to the html element, like which things I need to type to start the sequence as in the examples on their site it always has
something like this

and I’m not sure of if I need to include the html and body things in beginning, but your help makes me feel like I could play around a bit more and figure it out

Cheers

[Taiheta]

Hi, you should use classes to attach css styles to html elements.

<p class="fontSize-m fontWeight-3 fontColor-slate hoverFontColor-black">Text</p>

<style>
/* Font Size Classes */
.fontSize-xxxxl{font-size:46px;}
.fontSize-xxxl{font-size:38px;}
.fontSize-xxl{font-size:28px;}
.fontSize-xl{font-size:20px;}
.fontSize-l{font-size:18px;}
.fontSize-m{font-size:16px;}
.fontSize-s{font-size:14px;}
.fontSize-xs{font-size:12px;}
.fontSize-xxs{font-size:10px;}

/* Font Weight Classes */
.fontWeight-3{font-family:FaktSoftPro Medium;}
.fontWeight-2{font-family:FaktSoftPro Normal;}
.fontWeight-1{font-family:FaktSoftPro Blond;}

/* Font Color Classes */
.fontColor-black{color:#1F2D3D;}
.fontColor-steel{color:#273444;}
.fontColor-slate{color:#3C4858;}
.fontColor-coal{color:#606E82;}
.fontColor-silver{color:#8492A6;}
.fontColor-rock{color:#93A7C3;}
.fontColor-ash{color:#C0CCDA;}
.fontColor-white{color:#FFFFFF;}
.fontColor-sea{color:#4F82C9;}
.fontColor-calm{color:#526E95;}
.fontColor-rain{color:#435E85;}
.fontColor-storm{color:#304A6E;}
.fontColor-pink{color:#FF1DA3;}
.fontColor-purple{color:#A11DFF;}
.fontColor-leaf{color:#8CCBB4;}
.fontColor-blue{color:#20B6FF;}
.fontColor-general{color:#1FB6FF;}
.hoverFontColor-general:hover{color:#19ADF4;}
.hoverFontColor-pink:hover{color:#E1198F;}
.hoverFontColor-purple:hover{color:#961BEF;}
.hoverFontColor-silver:hover{color:#606E82;}
.hoverFontColor-black:hover{color:#1F2D3D;}

/* Background Color Classes */
.backgroundColor-white{background-color:#FFFFFF;}
.backgroundColor-blue{background-color:#20B6FF;}
.backgroundColor-black{background-color:#1F2D3D;}

/* Border Color Classes */
.borderColor-hail{border-color:#E5E9F2;border-style: solid;border-width: 1px;}

/* Text Alignment Classes */
.textAlign-left{text-align: left;}
.textAlign-center{text-align: center;}
.textAlign-right{text-align: right;}

/* Text Transformation Classes */
.textTransform-lowercase{text-transform: lowercase;}
.textTransform-uppercase{text-transform: uppercase;}
.textTransform-capitalize{text-transform: capitalize;}

/* Text Decoration Class */
.underline {text-decoration:underline;}
.hoverunderline:hover {text-decoration:underline;}
.linethrough{text-decoration:line-through;}

/* Line Height Classes */
.lineHeight-xl{line-height:1.8;}
.lineHeight-l{line-height:1.6;}
.lineHeight-m{line-height:1.4;}
.lineHeight-s{line-height:1.2;}
.lineHeight-xs{line-height:1;}

/* Opacity Classes */
.opacity-none{opacity:0;}
.opacity-l{opacity:0.3;}
.opacity-m{opacity:0.5;}
.opacity-s{opacity:0.8;}
.opacity-xs{opacity:0.9;}
._opacity-none{opacity:0;}

/* Pointer Event Classes */
.pointer-all{pointer-events:all;}
.pointer-none{pointer-events:none;}
._pointer-none{pointer-events:none;}

/* Cursor Classes */
.cursor-pointer{cursor: pointer;}
.cursor-text{cursor:text;}
.cursor-default{cursor:default;}

/* Uniform Border radius Classes */
.borderRadius-circle{border-radius:100%;}
.borderRadius-xxxl{border-radius:32px;}
.borderRadius-xxl{border-radius:16px;}
.borderRadius-xl{border-radius:12px;}
.borderRadius-l{border-radius:8px;}
.borderRadius-m{border-radius:6px;}
.borderRadius-s{border-radius:4px;}
.borderRadius-xs{border-radius:3px;}
.borderRadius-xxs{border-radius:2px;}
.borderRadius-xxxs{border-radius:1px;}

/* Unequal Border Radius Classes */
.borderRadiusTopLeft-xs{border-radius: 2px 0px 0px 0px;}
.borderRadiusTopRight-xs{border-radius: 0px 2px 0px 0px;}
.borderRadiusBottomLeft-xs{border-radius: 0px 0px 2px 0px;}
.borderRadiusBottomRight-xs{border-radius: 0px 0px 0px 2px;}
.borderRadiusTopLeft-s{border-radius: 4px 0px 0px 0px;}
.borderRadiusTopRight-s{border-radius: 0px 4px 0px 0px;}
.borderRadiusBottomLeft-s{border-radius: 0px 0px 4px 0px;}
.borderRadiusBottomRight-s{border-radius: 0px 0px 0px 4px;}
.borderRadiusTopLeft-m{border-radius: 6px 0px 0px 0px;}
.borderRadiusTopRight-m{border-radius: 0px 6px 0px 0px;}
.borderRadiusBottomLeft-m{border-radius: 0px 0px 6px 0px;}
.borderRadiusBottomRight-m{border-radius: 0px 0px 0px 6px;}
.borderRadiusTopLeft-l{border-radius: 9px 0px 0px 0px;}
.borderRadiusTopRight-l{border-radius: 0px 9px 0px 0px;}
.borderRadiusBottomLeft-l{border-radius: 0px 0px 9px 0px;}
.borderRadiusBottomRight-l{border-radius: 0px 0px 0px 9px;}
.borderRadiusTopLeft-xl{border-radius: 12px 0px 0px 0px;}
.borderRadiusTopRight-xl{border-radius: 0px 12px 0px 0px;}
.borderRadiusBottomLeft-xl{border-radius: 0px 0px 12px 0px;}
.borderRadiusBottomRight-xl{border-radius: 0px 0px 0px 12px;}

/* Perspective Shadow Classes */
._boxShadow-distant { box-shadow:  0px 1px 7px 0px rgba(0, 0, 0, 0.06);}
.boxShadow-close { box-shadow:  0px 1px 2px 0px rgba(0, 0, 0, 0.12);}
.boxShadow-subtle {box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.20);}

/* 3d Shadow Classes */
.boxShadow-emboss {
box-shadow: inset 0 -3px 0 0 rgba(0,0,0,0.10);
}
.boxShadow-deboss {
box-shadow: inset 0 3px 0 0 rgba(0,0,0,0.10);
}
.boxShadow-raise {
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.06);
}
.boxShadow-depress {
box-shadow: inset 0 2px 2px 0 rgba(0,0,0,0.03);
}

/* Hover Shadow Classes */
.boxShadow-emboss-hover:hover {
box-shadow: inset 0 -3px 0 0 rgba(0,0,0,0.10);
}
.boxShadow-deboss-hover:hover {
box-shadow: inset 0 3px 0 0 rgba(0,0,0,0.10);
}
.boxShadow-raise-hover:hover {
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.06);
}
.boxShadow-distant-hover:hover {
box-shadow: 0 1px 7px 0 rgba(0,0,0,0.06);
}

/* Button Size Classes */
.button-xl {
font-size:16px;
font-family:FaktSoftPro Medium;
padding-left: 20px;
padding-right: 20px;
padding-top: 17px;
padding-bottom: 15px;
height: 50px;
border-radius: 6px;
  display: inline-block; 
  vertical-align: middle;
text-transform: capitalize;
cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
    pointer-events:all;
}

.button-l {
font-size:14px;
font-family:FaktSoftPro Medium;
padding-left: 15px;
padding-right: 15px;
padding-top: 12px;
padding-bottom: 13px;
height: 40px;
border-radius: 4px;
  display: inline-block; 
  vertical-align: middle;
text-transform: capitalize;
cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
    pointer-events:all;
}

.button-m {
font-size:14px;
font-family:FaktSoftPro Medium;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 12px;
height: 35px;
border-radius: 4px;
  display: inline-block; 
  vertical-align: middle;
text-transform: capitalize;
cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
    pointer-events:all;
}

.button-s {
font-size:14px;
font-family:FaktSoftPro Medium;
padding-left: 15px;
padding-right: 15px;
padding-top: 7px;
padding-bottom: 12px;
height: 30px;
border-radius: 4px;
  display: inline-block; 
  vertical-align: middle;
text-transform: capitalize;
cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
    pointer-events:all;
}

.button-xs {
font-size:12px;
font-family:FaktSoftPro Medium;
padding-left: 12px;
padding-right: 12px;
padding-top: 6px;
padding-bottom: 12px;
height: 25px;
border-radius: 3px;
  display: inline-block; 
  vertical-align: middle;
text-transform: capitalize;
cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
    pointer-events:all;
}

/* Flat Button Classes */
.flatButton-general {
color:#ffffff;
background-color: #1FB6FF;
border-color: #1FB6FF;
border-style: solid;
border-width: 1px;
}
.flatButton-general:hover {
background-color: #19ADF4;
border-color: #19ADF4;
}
.flatButton-positive {
color:#ffffff;
background-color: #00D95F;
border-color: #00D95F;
border-style: solid;
border-width: 1px;
}
.flatButton-positive:hover {
background-color: #11C360;
border-color: #11C360;
}
.flatButton-white {
color:#3C4858;
background-color: #ffffff;
border-color: #E5E9F2;
border-style: solid;
border-width: 1px;
}
.flatButton-white:hover {
box-shadow: inset 0 -3px 0 0 rgba(0,0,0,0.10);
}

/* Ghost Button Classes */
.ghostButton-general {
color:#3C4858;
background-color: #ffffff;
border-color: #E5E9F2;
border-style: solid;
border-width: 1px;
}
.ghostButton-orange {
color:#3C4858;
background-color: #ffffff;
border-color: #E5E9F2;
border-style: solid;
border-width: 1px;
}
.ghostButton-positive {
color:#3C4858;
background-color: #ffffff;
border-color: #E5E9F2;
border-style: solid;
border-width: 1px;
}
.ghostButton-negative {
color:#3C4858;
background-color: #ffffff;
border-color: #E5E9F2;
border-style: solid;
border-width: 1px;
}
.ghostButton-general:hover {
color:#ffffff;
background-color: #1FB6FF;
border-color: #1FB6FF;
}
.ghostButton-orange:hover {
color:#ffffff;
background-color: #FFC82C;
border-color: #FFC82C;
}
.ghostButton-positive:hover {
color:#ffffff;
background-color: #00D95F;
border-color: #00D95F;
}
.ghostButton-negative:hover {
color:#ffffff;
background-color: #FF4949;
border-color: #FF4949;
}

/* Dark Ghost Button Classes */
.darkGhostButton-white {
color:#ffffff;
background-color: #273444;
border-color: #ffffff;
border-style: solid;
border-width: 1px;
}
.darkGhostButton-general {
color:#ffffff;
background-color: #273444;
border-color: #ffffff;
border-style: solid;
border-width: 1px;
}
.darkGhostButton-orange {
color:#ffffff;
background-color: #273444;
border-color: #ffffff;
border-style: solid;
border-width: 1px;
}
.darkGhostButton-positive {
color:#ffffff;
background-color: #273444;
border-color: #ffffff;
border-style: solid;
border-width: 1px;
}
.darkGhostButton-negative {
color:#ffffff;
background-color: #273444;
border-color: #ffffff;
border-style: solid;
border-width: 1px;
}
.darkGhostButton-white:hover {
color:#3C4858;
background-color: #ffffff;
border-color: #ffffff;
}
.darkGhostButton-general:hover {
color:#ffffff;
background-color: #1FB6FF;
border-color: #1FB6FF;
}
.darkGhostButton-orange:hover {
color:#ffffff;
background-color: #FFC82C;
border-color: #FFC82C;
}
.darkGhostButton-positive:hover {
color:#ffffff;
background-color: #00D95F;
border-color: #00D95F;
}
.darkGhostButton-negative:hover {
color:#ffffff;
background-color: #FF4949;
border-color: #FF4949;
}

/* Disabled Button Classes */
.disabledLight {
color:#8492A6 !important;
background-color: #F9FAFC !important;
border-color: #E5E9F2 !important;
pointer-events: none !important; 
}
.disabledDark {
color:#C0CCDA !important;
background-color: #273444 !important;
border-color: #E5E9F2 !important;
pointer-events: none !important; 
}

/* Placeholder color */
::placeholder {
 color: #C0CCDA !important;
  opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: #C0CCDA !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
 color: #C0CCDA !important;
}

/* Disabled input */
input[disabled], textarea[disabled],
select[disabled='disabled']{
   -webkit-text-fill-color: rgba(132, 146, 166, 1); 
   -webkit-opacity: 1; 
   color: rgba(132, 146, 166, 1); 
}

.disabledInput {
background-color: #F9FAFC !important;
}

/* Animation timing Classes */
.transitionDuration-xs {transition: 0.1s;}
.transitionDuration-s {transition: 0.2s;}
.transitionDuration-m {transition: 0.3s;}
.transitionDuration-l {transition: 0.4s;}
.transitionDuration-xl {transition: 0.5s;}

/* Animation Easing */
.transitionTimingFunction-linear {transition-timing-function: linear;}
.transitionTimingFunction-ease {transition-timing-function: ease;}
.transitionTimingFunction-cb--scaleIn {transition-timing-function: ease-in;}
.transitionTimingFunction-cb--scaleOut {transition-timing-function: ease-out;}
.transitionTimingFunction-cb--scaleUp {transition-timing-function: cubic-bezier(0,2,0,0.5);}

/* Animation Classes */
.animation--rotate-180 { transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); }

/* Display Classes */
.display-ib{display:inline-block;}
.display-if{display:inline-flex;}

/* Float Classes */
    float-left{float:left;}
    float-right{ float:right;}

/* Alignment Classes */
 .verticalAlign{ vertical-align: middle;}

/* Dynamic Classes */
.dynamicSize{display:inline-flex;-webkit-box-align;justify-content:center;align-items:center;position:absolute;}

/* Rotation classes */
._dragRotate-left {
  -ms-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

._dragRotate-right {
  -ms-transform: rotate(3deg);
  -webkit-transform: rotate(3deg);
  transform: rotate(3deg);
}

/* Object Fit classes */
.objectFit-fill {object-fit: fill;}
.objectFit-contain {object-fit: contain;}
.objectFit-cover {object-fit: cover;}
.objectFit-scale {object-fit: scale-down;}
.objectFit-none {object-fit: none;}
</style>

[boston85719]

Not sure what all the stuff is for? Are those all classes for formatting the phone number?

[Taiheta]

@boston85719

such as font type, font size and font color

@boston85719

but I never know how to apply it to the html element,

They are example of classes from my application.

@boston85719

formatting the phone number?

Idk what you mean by formatting, they are (some) classes that can be used to style a phone number (text/p/div, html).

Using classes is preferred to inline style because you won’t have multiple lines of code that are the same (repeated). You can also choose whatever naming convention and easily add multiple predefined styles to whatever.

[J805]

Glad it was helpful. Sometimes things are more complicated than we need at the moment. W3schools can be overwhelming. That’s why I just gave you the snippet you needed. I know what’s it’s like to see everything and feel like it’s too complicated.

[boston85719]

I recently was dealing with an issue of trying to get a phone call initiated on clicking an icon…what I found on the forum for using an image didn’t work for me as my icon was an image, however, I couldn’t get it to have the size dimensions needed.

So I was able to find a way to get the phone number text to be transparent and then I placed the HTML on top of the icon in the editor. Result is working and wanted to share an alternative way to “style” the call click.