Centering a custom made button, button transitions

dipanjan94 · May 19, 2020

In this page https://www.dipanjanpal.com/Awards I have added a button at the end of it. However, due to some clumsy coding, I was not able to properly center it for both mobile and desktop. Can anyone please help me with it?
Also, is there anyway to include a fade-in effect for the button when someone hovers their mouse on top of it? Like slowly fading in from grey to black in like 0.2 sec?
This is about my footer - I have added my email in my footer. However, instead of labeling it as EMAIL, I think a small mail icon would look very neat. Can this be done using html/css?

Hikin' Mike · May 19, 2020

@dipanjan94 said:
1. In this page https://www.dipanjanpal.com/Awards I have added a button at the end of it. However, due to some clumsy coding, I was not able to properly center it for both mobile and desktop. Can anyone please help me with it?

You have this:

.button {
    margin: 35px auto 10px;
    transition: 0.3s;
}

Replace it with this:

.button {
  padding: 35px 0 10px;
  text-align: center;
}

@dipanjan94 said:
2. Also, is there anyway to include a fade-in effect for the button when someone hovers their mouse on top of it? Like slowly fading in from grey to black in like 0.2 sec?

For your button a code, remove transition-duration: 0.002s; and use transition: all .2s ease-in-out;.

@dipanjan94 said:
3. This is about my footer - I have added my email in my footer. However, instead of labeling it as EMAIL, I think a small mail icon would look very neat. Can this be done using html/css?

DO NOT USE <center> </center> to center content. It will not work in HTML5 (what SmugMug uses now).

Remove this:

<div>
  <center> 

<b></b><p><b><q>EMAIL</q> &nbsp;: &nbsp;</b><a href="mailto:hello@dipanjanpal.com"> hello@dipanjanpal.com </a><br></p>
<br>   
  <p>P.B. Copyright © 2020 Dipanjan Pal<br>All Rights Reserved</p>
   </center>
</div>

Use this in the HTML section:

<div>

  <p><span class="sm-fonticon sm-fonticon-Mail"></span><a href="mailto:hello@dipanjanpal.com">hello@dipanjanpal.com</a></p>

  <p>P.B. Copyright © 2020 Dipanjan Pal<br>All Rights Reserved</p>

</div>

CSS:

div {text-align: center;}
.sm-fonticon-Mail {margin-right: 5px;}

dipanjan94 · May 20, 2020

Thank you so much Mike! For the one where you added the Mail fonticon, I think it is not vertically centered with the email id line !

Could you tell me what do I need to do in order to center this vertically?

Hikin' Mike · May 20, 2020

@dipanjan94 said:
Thank you so much Mike! For the one where you added the Mail fonticon, I think it is not vertically centered with the email id line !
Could you tell me what do I need to do in order to center this vertically?

Add this: .sm-fonticon-Mail::before {vertical-align: text-bottom;}

dipanjan94 · May 20, 2020

It looks almost there. May be I'd shift it up by 1px or 2px. Is there anyway to shift the icon pixel by pixel, so that I can get it exactly where I desire?

Hikin' Mike · May 20, 2020

@dipanjan94 said:
It looks almost there. May be I'd shift it up by 1px or 2px. Is there anyway to shift the icon pixel by pixel, so that I can get it exactly where I desire?

Try adding line-height: 20px;:

.sm-fonticon-Mail::before {
  vertical-align: text-bottom;
  line-height: 20px;
}

dipanjan94 · May 20, 2020

Thank you so much! line-height: 23px; did it for me!

Centering a custom made button, button transitions

Comments