Centering a custom made button, button transitions

dipanjan94

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?
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?
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?

Hikin' Mike

@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

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

@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

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

@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

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